settings.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 | Settings</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/settings/changeDisplayName.js", async: false }, 24 { src: "/assets/js/settings/changeUsername.js", async: false }, 25 { src: "/assets/js/settings/changePronouns.js", async: false }, 26 { src: "/assets/js/settings/changeBio.js", async: false }, 27 { src: "/assets/js/settings/changePfp.js", async: false }, 28 { src: "/assets/js/settings/changeBanner.js", async: false }, 29 { src: "/assets/js/settings/changeMatureContentPref.js", async: false }, 30 { src: "/assets/js/settings/changeSensitiveContentPref.js", async: false }, 31 { src: "/assets/js/settings/changePoliticalContentPref.js", async: false } 32 ).then(() => { 33 console.log("Scripts for /home have been loaded successfully."); 34 }).catch((error) => { 35 console.error("An error occurred: ", error, " please try refreshing."); 36 }); 37 </script> 38 </head> 39 40 <body onload="signedOutCheck()"> 41 <!-- Bottom Nav (mobile) --> 42 <!--<div class="mobileBottomNav" id="mobileBottomNav"> 43 <div class="nav"> 44 <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" class="active"><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> 45 </div> 46 </div>--> 47 48 <!-- Note successfully sent --> 49 <div id="successfullySent" style="display: none;"><p>Note successfully sent!</p></div> 50 51 <!-- New Note Alert --> 52 <!--<div class="notesAlert" id="notesAlert"> 53 <p>New Notes</p> 54 </div>--> 55 56 <!-- Notes --> 57 <div class="notes" id="notes"> 58 <div class="newNotesAdded" id="newNotesAdded"> 59 <!-- Notes go here. This content is user-generated, no default HTML should be here. --> 60 </div> 61 62 <div class="noteFilter"> 63 <div class="blogStyle" style="margin: 15px;"> 64 <h1>Settings</h1> 65 <!-- Tabs --> 66 <div class="settingsTabs"> 67 <a id="profileTab" onclick="switchTab('profile')" class="active">Profile</a> 68 <a id="accountTab" onclick="switchTab('account')">Account</a> 69 <a id="personalizationTab" onclick="switchTab('personalization')">Personalization</a> 70 <a id="subscriptionTab" onclick="switchTab('subscription')">Donate</a> 71 <a id="environmentTab" onclick="switchTab('environment')">Accessibility</a> 72 <!-- below is temp commented out --> 73 <!-- <a href="/remembering" id="unknownTab" onclick="unknownTab()">Remembering</a> --> 74 </div> 75 76 <!-- Tab #1 (Profile) --> 77 <br /> 78 79 <div id="profileTab-profile" style="padding-bottom: 0px;"> 80 <h2>Profile Information</h2> 81 <p style="color: var(--text-semi-transparent); font-size: 14.5px;">How you'll appear across Auride and other Katniny products.</p> 82 83 <br /> 84 85 <p>Profile Picture & Banner</p> 86 <img src="/assets/imgs/Transparency.png" draggable="false" alt="Your Katniny profile banner" id="banner_settings" style="width: 100%; height: 75px; background: var(--profile-picture-bg);" /> 87 <input type="file" id="fileInput_banner" accept="image/png, image/jpeg, image/webp, image/gif" style="display: none;" /> 88 <p id="errorUploadingBanner" style="color: var(--error-text); display: none;"></p> 89 90 91 <img src="" draggable="false" alt="Your Katniny profile picture" id="profilePicture_settings" class="profilePicture" /> 92 <button onclick="changePfp()" style="transform: translateY(-55px); margin-left: 5px;" id="changePfp">Change Picture</button> 93 <button onclick="changeBanner()" style="transform: translateY(-55px); margin-left: 5px;" id="changeBanner">Change Banner</button> 94 95 <input type="file" id="fileInput" accept="image/png, image/jpeg, image/webp, image/gif" style="display: none;" /> 96 <p id="errorUploadingPfp" style="color: var(--error-text); display: none;"></p> 97 98 99 <div style="transform: translateY(-20px);"> 100 <p>Display Name</p> 101 <input type="text" placeholder="Enter a fun display name!" style="font-size: 15px; margin-top: 3px;" id="displayName-text" class="displayName-text" /> 102 <p id="errorUsingDisplay" style="color: var(--error-text); font-size: 14px; display: none;"></p> 103 <p id="characterLimit_display" style="color: var(--text-semi-transparent); font-size: 14px; margin-top: 1px;">0/25</p> 104 <button onclick="setDisplayName()" id="saveDisplay" style="display: none;">Save</button> 105 106 <br /> 107 108 <p>Username</p> 109 <input type="text" placeholder="Enter a unique username!" style="font-size: 15px; margin-top: 3px;" id="username-text" oninput="usernameCharacters()" class="username-text" /> 110 <p id="characterLimit_username" style="color: var(--text-semi-transparent); font-size: 14px; margin-top: 1px;">0/20</p> 111 <p id="errorTakingUsername" style="color: var(--error-text); font-size: 14px; display: none;"></p> 112 <p id="usernameNotice" style="color: var(--error-text); font-size: 14px; display: none;">Changing your username will immediately make your old one available to take!</p> 113 <button onclick="setUsername()" id="saveUsername" style="display: none;">Save</button> 114 115 <br /> 116 117 <p>Pronouns</p> 118 <input type="text" placeholder="What do you preferred to be called? (Field can be empty)" style="font-size: 15px; margin-top: 3px;" id="pronouns-text" class="pronouns-text" /> 119 <p id="characterLimit_pronouns" style="color: var(--text-semi-transparent); font-size: 14px; margin-top: 1px;">0/15</p> 120 <button onclick="setPronouns()" id="savePronouns" style="display: none;">Save</button> 121 122 <br /> 123 124 <p>Bio</p> 125 <textarea id="bioText" class="bioText borderBlack" style="font-size: 14px;"></textarea> 126 <p id="characterLimit_bio" style="color: var(--text-semi-transparent);">0/500</p> 127 <button onclick="setBio()" id="saveBio" style="display: none;">Save</button> 128 </div> 129 </div> 130 </div> 131 132 <!-- Tab #2 (Account) --> 133 <div id="profileTab-account" style="display: none;"> 134 <h2>Personal Info</h2> 135 <p style="color: var(--text-semi-transparent); font-size: 14.5px;">Your personal information for Katniny Services.</p> 136 137 <br /> 138 139 <p>Email Address</p> 140 <input type="text" placeholder="Enter a new email address" style="font-size: 15px; margin-top: 3px;" id="email-address" class="email-address" /> 141 <p id="errorUsingEmail" style="color: var(--error-text); font-size: 14px; display: none;"></p> 142 <button onclick="setEmail()" id="saveEmail" style="display: none;" class="saveEmail">Save</button> 143 144 <br /> 145 <br /> 146 147 <p>Password</p> 148 <p id="passwordResetSent" style="color: var(--success-color); font-size: 14px; display: none;"></p> 149 <button onclick="sendPasswordResetEmail()" id="sendPasswordReset">Send Password Reset Email</button> 150 151 <br /> 152 <br /> 153 154 <p>Language Preference</p> 155 <select id="languagePreference"> 156 <option value="English (United States)">English (United States)</option> 157 <!--<option value="Lolcat">Lolcat</option>--> 158 </select> <i class="fa-solid fa-caret-down"></i> 159 160 <br /> 161 <br /> 162 163 <p>Data & Privacy</p> 164 <button onclick="seePersonalData()">See or Download My Data</button> 165 166 <!--<br /> 167 <br /> 168 169 Re-add at some point in time 170 <p>Verification</p> 171 <button onclick="verificationRequest()">Get Verified</button> 172 --> 173 174 <br /> 175 <br /> 176 177 <p style="color: var(--error-text)">Delete Account</p> 178 <button onclick="document.getElementById('deleteAccountModal').showModal()" class="dangerButton">Delete Account</button> 179 </div> 180 181 <!-- Tab #3 (Personalization) --> 182 <div id="profileTab-personalization" style="display: none;"> 183 <h2>Personalization</h2> 184 <p style="color: var(--text-semi-transparent); font-size: 14.5px;">Personalize your Auride experience. Transfers between web, desktop and mobile.</p> 185 186 <br /> 187 188 <p>Theme</p> 189 <button onclick="selectTheme()">Select Theme</button> 190 <a href="/create_theme"><button>Create Theme</button></a> 191 <a href="/userstudio"><button>Get Themes</button></a> 192 193 <br /> 194 <br /> 195 196 <p>Show Mature Content (NSFW Content)</p> 197 <p style="font-size: 14px; color: var(--text-semi-transparent);">Learn what each NSFW flag means. <a href="/blog/nsfw-flags" target="_blank">Learn more</a>.</p> 198 <button onclick="showMatureContentPrefChangeModal()">Change Preferences</button> 199 200 <br /> 201 <br /> 202 203 <p>Show Sensitive Content</p> 204 <p style="font-size: 14px; color: var(--text-semi-transparent);">Learn what each sensitive flag means. <a href="/blog/sensitive-flags" target="_blank">Learn more</a>.</p> 205 <button onclick="showSensitivePrefChangeModal()">Change Preferences</button> 206 207 <br /> 208 <br /> 209 210 <p>Show Political Content</p> 211 <p style="font-size: 14px; color: var(--text-semi-transparent);">Learn what each political flag means. <a href="/blog/political-flags" target="_blank">Learn more</a>.</p> 212 <button onclick="showPoliticalPrefChangeModal()">Change Preferences</button> 213 214 <br /> 215 <br /> 216 217 <p>Show Pride Logo During Pride Month</p> 218 <p id="updatedPrideFlagContentPref" style="display: none; font-size: 14px; color: var(--success-color);">Updated preference to "" successful!</p> 219 <button onclick="setPrideFlag(false)">Use Theme Logo</button> 220 <button onclick="setPrideFlag(true)">Use Pride Logo</button> 221 222 <br /> 223 <br /> 224 225 <p>Autoplay Videos</p> 226 <p id="updatedAutoplayContentPref" style="display: none; font-size: 14px; color: var(--success-color);">Updated preference to "" successful!</p> 227 <button onclick="setAutoplay(true)">Enable Autoplay</button> 228 <button onclick="setAutoplay(false)">Disable Autoplay</button> 229 230 <br /> 231 <br /> 232 233 <p>Experiments</p> 234 <p style="font-size: 14px; color: var(--error-text);">Experiments are work-in-progress features and are likely buggy.</p> 235 <button onclick="document.getElementById('experimentSelect').showModal()">See Experiments</button> 236 </div> 237 238 <!-- Tab #4 (Subscription) --> 239 <div id="profileTab-subscription" style="display: none;"> 240 <h2>Subscription</h2> 241 <p style="color: var(--text-semi-transparent); font-size: 14.5px;">Help us keep the lights on! Note that payment is powered and securely processed by Donorbox, and your payment details are never saved in Auride's database. We appreciate your support! :D</p> 242 243 <br /> 244 245 <!-- Inactive --> 246 <div id="subscribe"> 247 <h3>Donate to Auride</h3> 248 <p style="font-size: 13px; color: var(--text-semi-transparent);">Payments are handled securely by Donorbox. We only accept PayPal at the moment.</p> 249 250 <br /> 251 252 <a href="https://donorbox.org/katninystudios" target="_blank"><button>Donate on Donorbox</button></a> 253 </div> 254 255 <!-- Active --> 256 <div id="thanksForSubscribing" style="display: none;"> 257 <h3>Thank you for subscribing!</h3> 258 <p style="font-size: 14px; color: var(--text-semi-transparent);">Thank you for subscribing to Katniny+ and helping Auride stay afloat! Enjoy your benefits!</p> 259 <p style="font-size: 14px; color: var(--error-text); display: none;" id="overdueBill">Your subscription is overdue and you'll lose your benefits soon.</p> 260 <ul> 261 <li>Upload files up to 35MB</li> 262 <!--<li>Set a custom background on your profile</li> (TO:DO)--> 263 <li>Set a .gif file as your profile picture</li> 264 <li>Get a special badge on your profile!</li> 265 </ul> 266 <p>and more benefits coming soon!</p> 267 268 <br /> 269 270 <p id="subMemberSince">You've been subscribed since MM/DD/YY</p> 271 <p id="subRenewalDay" style="font-size: smaller; color: var(--text-semi-transparent);">Your subscription gets renewed on MM/DD/YY</p> 272 273 <br /> 274 275 <button onclick="cancelSubscription()">Cancel Subscription</button> 276 </div> 277 </div> 278 279 <div id="profileTab-environment" style="display: none;"> 280 <h2>Accessibility</h2> 281 <p style="color: var(--text-semi-transparent); font-size: 14.5px;">Accessibility settings for your Auride account. We're striving to make Auride accessible to everyone!</p> 282 283 <br /> 284 285 <p>Use Dyslexia Font</p> 286 <p style="font-size: 14px; color: var(--text-semi-transparent);">Enable the OpenDyslexic font, specifically designed to improve readability for users with dyslexia.</p> 287 <p id="updatedOpenDysContentPref" style="display: none; font-size: 14px; color: var(--success-color);">Updated preference to "" successfully!</p> 288 <button onclick="setOpenDyslexia(true)">Enable</button> 289 <button onclick="setOpenDyslexia(false)">Disable</button> 290 291 <br /> 292 <br /> 293 294 <p>Font Scale</p> 295 <p style="font-size: 14px; color: var(--text-semi-transparent);">Adjust font size for easier reading.</p> 296 <p id="updatedFontScaleContentPref" style="display: none; font-size: 14px; color: var(--success-color);">Updated preference to "" successful!</p> 297 <button onclick="setFontScale('normal')">Normal</button> 298 <button onclick="setFontScale('large')">Large</button> 299 300 <br /> 301 <br /> 302 303 <p>Larger Note Buttons</p> 304 <p style="font-size: 14px; color: var(--text-semi-transparent);">Increase button size and spacing for easier interaction.</p> 305 <p id="updatedNoteSizePref" style="display: none; font-size: 14px; color: var(--success-color);">Updated preference to "" successful!</p> 306 <button onclick="setInteractionScale('normal')">Normal</button> 307 <button onclick="setInteractionScale('large')">Large</button> 308 </div> 309 </div> 310 311 312 </div> 313 314 <!-- Auride Accounts --> 315 <div class="aurideAccounts"> 316 <h3>Auride Accounts</h3> 317 <p>Follow accounts associated with Auride.</p> 318 319 <div class="katniny"> 320 <!-- Me :3 --> 321 <div class="katniny"> 322 <img class="recommendAcc-pfp" src="" id="katninyPfp" draggable="false" /> <p id="katninyDisplay"></p> 323 <br /> <a href="/u" id="followBtn-1"><button class="followBtn">Follow</button></a> 324 <p id="katninyUser-pronouns"></p> 325 </div> 326 327 <br /> 328 329 <!-- Auride --> 330 <div class="auride"> 331 <img class="recommendAcc-pfp" src="" id="auridePfp" draggable="false" /> <p id="aurideDisplay"></p> 332 <br /> <a href="/u" id="followBtn-2"><button class="followBtn">Follow</button></a> 333 <p id="aurideUser-pronouns"></p> 334 </div> 335 336 <br /> 337 338 <!-- Katniny Studios --> 339 <div class="katninystudios"> 340 <img class="recommendAcc-pfp" src="" id="katninystudiosPfp" draggable="false" /> <p id="katninystudiosDisplay"></p> 341 <br /> <a href="/u" id="followBtn-3"><button class="followBtn">Follow</button></a> 342 <p id="katninystudiosUser-pronouns"></p> 343 </div> 344 </div> 345 </div> 346 347 <div class="policies"> 348 <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> 349 </div> 350 351 <div id="notSignedIn-banner"> 352 <p>Join the fun on Auride!</p> 353 <a href="/auth/login"><button>Login</button></a> 354 <a href="/auth/register"><button>Create an account</button></a> 355 </div> 356 357 <!-- Achievement Unlock --> 358 <div id="achievementUnlock" class="achievementUnlock" style="display: none;"> 359 <div id="achievementIcon"><i class="fa-solid fa-pencil"></i></div> <p id="achievementName">Achievement Name</p> 360 </div> 361 362 <dialog id="showAchievementUnlock"> 363 <h2 id="titleAndIcon">title and stuff</h2> 364 <p id="unlockReason">because you did</p> 365 <p id="unlockDate">m/d/y (the objectively correct way)</p> 366 <button onclick="document.getElementById('showAchievementUnlock').close();">Okay!</button> 367 </dialog> 368 369 <!-- Achievement Unlock --> 370 <div id="achievementUnlock" class="achievementUnlock" style="display: none;"> 371 <div id="achievementIcon"><i class="fa-solid fa-pencil"></i></div> <p id="achievementName">Achievement Name</p> 372 </div> 373 374 <dialog id="showAchievementUnlock"> 375 <h2 id="titleAndIcon">title and stuff</h2> 376 <p id="unlockReason">because you did</p> 377 <p id="unlockDate">m/d/y (the objectively correct way)</p> 378 <button onclick="document.getElementById('showAchievementUnlock').close();">Okay!</button> 379 </dialog> 380 381 <!-- Modals --> 382 <dialog id="themeSelect"> 383 <h2>Pick a theme type</h2> 384 <p style="color: var(--text-semi-transparent);">Use standard Auride themes or try themes created by fellow users!</p> 385 386 <br /> 387 388 <button style="width: 100%; font-size: 15px;" onclick="aurideThemes()"> 389 Standard Auride Themes<br/> 390 <span style="color: var(--text-semi-transparent); font-size: 14px;">All the themes created by Auride.</span> 391 </button> 392 393 <button style="width: 100%; font-size: 15px;" onclick="userThemes()"> 394 Custom Themes<br/> 395 <span style="color: var(--text-semi-transparent); font-size: 14px;">Themes created by fellow Auride users!</span> 396 </button> 397 <p style="margin-top: 5px;">Want to make your own custom theme? <a href="/create_theme" style="color: var(--main-color);">Now you can!</a></p> 398 399 <br /> 400 401 <button onclick="document.getElementById('themeSelect').close();">Nevermind</button> 402 </dialog> 403 404 <dialog id="experimentSelect"> 405 <h2>Try an experiment!</h2> 406 <p style="color: var(--error-text);">Experiments are work-in-progress features and are likely buggy.</p> 407 <button onclick="document.getElementById('experimentSelect').close();">Nevermind</button> 408 409 <br /> 410 <br /> 411 412 <!-- Direct Messaging --> 413 <div class="themeContainer" onclick="toggleDMExperimentDetails()"> 414 <img src="/assets/imgs/dm_experiment.png" alt="Two users talking to each other through Direct Messages" class="themeImage" /> 415 <div class="themeText">Direct Messages</div> 416 </div> 417 <div id="dm_details" style="display: none;"> 418 <p style="color: var(--text-semi-transparent);">Message other users on Auride. (VERY EARLY WORK IN PROGRESS)</p> 419 <p style="color: var(--text-semi-transparent); font-size: 14px;">Last Updated: July 15, 2024</p> 420 <button onclick="enableDms()" id="enableDms">Enable</button> <button onclick="disableDms()" id="disableDms">Disable</button> 421 </div> 422 423 <br /> 424 <br /> 425 426 <button onclick="document.getElementById('experimentSelect').close();">Nevermind</button> 427 </dialog> 428 429 <dialog id="fatalAccountError"> 430 <h2>Fatal Account Error</h2> 431 <p>When creating or updating your account, Auride encountered an error. If it's an error related to just your email, 432 this popup will close soon as we automatically resolve email related errors. Otherwise, you're missing your display name, username and/or profile picture. <br /> 433 Before you can use Auride, you will need to resolve your missing info. 434 </p> 435 436 <br /> 437 438 <button onclick="document.getElementById('fatalAccountError').close();">Resolve</button> 439 </dialog> 440 441 <dialog id="fatalAccountError_AutomaticFix"> 442 <h2>Account Repaired</h2> 443 <p>When creating your account or updating your account, there was a fatal error. However, we were able to automatically resolve this error. 444 <br /> You may continue using Auride. 445 </p> 446 447 <a href="/home"><button>Okay</button></a> 448 </dialog> 449 450 <dialog id="prideFlagModal"> 451 <h2>Show pride flag logo during pride month?</h2> 452 <p>You can turn this off if you find it hard to read, prefer your theme's logo, etc.</p> 453 454 <br /> 455 456 <button onclick="prideFlagHide()" style="text-align: center; width: 100%;">Use Theme Logo (Hide)</button> 457 458 <br /> 459 460 <button onclick="prideFlagShow()" style="text-align: center; width: 100%;">Use Pride Logo (Show)</button> 461 462 <br /> 463 <br /> 464 465 <button onclick="document.getElementById('prideFlagModal').close();">Finish</button> 466 </dialog> 467 468 <dialog id="cancelSubscription"> 469 <h2>Cancel subscription?</h2> 470 <p>Are you sure you want to cancel your subscription? If you cancel your subscription, you'll lose all your benefits at the end of your billing period.</p> 471 <p id="errorCancelSub" style="color: var(--error-text); display: none;">error.</p> 472 473 <br /> 474 475 <button onclick="cancelSubscription_Confirm()" style="width: 100%; padding: 5px;">Yes, I'm sure</button> 476 <button onclick="document.getElementById('cancelSubscription').close()" style="width: 100%; padding: 5px;">Nevermind</button> 477 </dialog> 478 479 <dialog id="signInPrompt"> 480 <img src="/assets/imgs/All_transparent.png" draggable="false" style="width: 450px; height: 100px; margin-left: 17%; margin-right: 15%;" /> 481 <h2>You must be signed in.</h2> 482 <p>To perform this action, you need to be signed into Auride!</p> 483 <br /> 484 <a href="/auth/login"><button>Login</button></a> 485 <div style="margin-top: 5px;"></div> 486 <a href="/auth/register"><button>Register</button></a> 487 </dialog> 488 489 <dialog id="openLink"> 490 <h2>Leaving Auride</h2> 491 <p>This link is taking you to the following website:</p> 492 493 <br /> 494 495 <p style="text-align: center;" id="linkyLink">https://link.com/</p> 496 497 <br /> 498 499 <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> 500 </dialog> 501 502 <dialog id="addAltText"> 503 <h2>Add Alt Text</h2> 504 <p>Help those with visual impairments or low vision understand what your note is.</p> 505 506 <textarea id="altText_input" placeholder="A fluffy orange cat sitting on a windowsill, licking its paw and grooming itself"></textarea> 507 508 <br /> 509 510 <button onclick="addAltText_finish()">Finish</button> 511 </dialog> 512 513 <dialog id="addAltText"> 514 <h2>Add Alt Text</h2> 515 <p>Help those with visual impairments or low vision understand what your note is.</p> 516 517 <textarea id="altText_input" placeholder="A fluffy orange cat sitting on a windowsill, licking its paw and grooming itself"></textarea> 518 519 <br /> 520 521 <button onclick="addAltText_finish()">Finish</button> 522 </dialog> 523 524 <dialog id="renoteOrQuote"> 525 <h2>Renote Option</h2> 526 <p>Would you like to just renote or quote renote?</p> 527 <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> 528 529 <br /> 530 531 <button onclick="renoteNormally()"><i class="fa-solid fa-retweet"></i> Renote without Quoting</button> 532 <br /> 533 <button onclick="quoteRenote()"><i class="fa-solid fa-quote-left"></i> Quote Renote</button> 534 535 <br /> 536 <br /> 537 538 <button onclick="closeRenotePopup()">Nevermind, I don't want to interact</button> 539 </dialog> 540 541 <dialog id="verifyEmail"> 542 <h2><i class="fa-solid fa-envelope-circle-check"></i> Please verify your email</h2> 543 <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> 544 <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> 545 546 <br /> 547 548 <button onclick="getVerificationEmail()" style="width: 100%;"><i class="fa-solid fa-check-to-slot"></i> Verify Email</button> 549 </dialog> 550 551 <dialog id="emailSent_emailVer"> 552 <h2><i class="fa-solid fa-envelope-circle-check"></i> Email sent!</h2> 553 <p>Once you verify your email, please click the button below to verify, then we won't bug you again!</p> 554 <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> 555 556 <br /> 557 558 <button onclick="window.location.reload()">Check Verification Status</button> 559 </dialog> 560 561 <dialog id="noteDeleted"> 562 <h2>Note Deleted</h2> 563 <p>Note was successfully deleted.</p> 564 565 <br /> 566 567 <button onclick="window.location.reload()">Okay</button> 568 </dialog> 569 570 <dialog id="noteUpdated"> 571 <h2>Note Updated</h2> 572 <p>Note was successfully updated.</p> 573 574 <br /> 575 576 <button onclick="window.location.reload()">Okay</button> 577 </dialog> 578 579 <dialog id="accountWarning"> 580 <h2>Account Warning</h2> 581 <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> 582 583 <br /> 584 585 <p style="color: var(--text-semi-transparent);">Reason: <span id="warningReason"></span></p> 586 587 <br /> 588 <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> 589 <p>You can continue using Auride after agreeing to our Terms of Service.</p> 590 591 <input type="checkbox" id="warningAgreeToTerms" style="width: 15px;"> I agree 592 <p style="color: var(--error-text); display: none;" id="warningAcknowledge">Please agree to the Terms before continuing.</p> 593 <br /> 594 <button onclick="acknowledgeWarning()">Continue using Auride</button> 595 </dialog> 596 597 <dialog id="editDisplayName"> 598 <h2>Edit Display Name</h2> 599 <p>What's your new online alias?</p> 600 601 <br /> 602 603 <input type="text" placeholder="Enter a new display name!" /> 604 605 606 <br /> 607 <br /> 608 609 <button onclick="confirmDisplayChange()">Apply</button> <button onclick="document.getElementById('editDisplayName').close(); document.getElementById('displayName-text').value = ''">Nevermind</button> 610 611 </dialog> 612 613 <dialog id="editUsername"> 614 <h2>Edit Username</h2> 615 <p>Change your username! <span style="color: var(--error-text)">Warning: Your previous username will be up for grabs!</span></p> 616 617 <br /> 618 619 <input type="text" placeholder="Enter a new username!" oninput="usernameCharacters()" /> 620 <p id="characterLimit_username" style="color: var(--text-semi-transparent)">0/20</p> 621 <p style="color: var(--error-text); display: none; margin-top: 5px;" id="errorTaken"></p> 622 623 <br /> 624 <br /> 625 626 <button onclick="confirmUsernameChange()">Apply</button> <button onclick="document.getElementById('editUsername').close(); document.getElementById('username-text').value = ''">Nevermind</button> 627 628 </dialog> 629 630 <dialog id="editPronouns"> 631 <h2>Edit Pronouns</h2> 632 <p>Help create a welcoming space by adding your pronouns!</p> 633 634 <br /> 635 636 <input type="text" placeholder="Enter your new pronouns!" /> 637 638 639 <br /> 640 <br /> 641 642 <button onclick="confirmPronounsChange()">Apply</button> <button onclick="document.getElementById('editPronouns').close(); document.getElementById('pronouns-text').value = ''">Nevermind</button> 643 644 </dialog> 645 646 <dialog id="editEmail"> 647 <h2>Sensitive Action</h2> 648 <p>To change your account's email address, please confirm your identity.</p> 649 <input type="password" id="password_reauth_email" placeholder="Enter your password" /> 650 <p style="font-size: 14.5px; color: var(--error-text); display: none;" id="errorWithReauthenticating_email"></p> 651 652 <br /> 653 <br /> 654 655 <button onclick="changeEmail_reauth()" id="verifyEmail_verification">Verify</button> <button onclick='document.getElementById("editEmail").close()' id="cancelEmailReauthentication">Nevermind</button> 656 </dialog> 657 658 <dialog id="editEmailThisTime"> 659 <h2>New Email</h2> 660 <p>Thanks for verifying your identity! You may now change your email.</p> 661 662 <br /> 663 664 <input type="email" id="newEmail" placeholder="Enter your new email address" /> 665 <p style="color: var(--error-text); display: none; margin-top: 5px;" id="errorEmail"></p> 666 667 <br /> 668 <br /> 669 670 <button onclick="changeEmail()">Apply</button> <button onclick="document.getElementById('editEmailThisTime').close(); document.getElementById('newEmail').value = '';">Nevermind</button> 671 </dialog> 672 673 <dialog id="seeData"> 674 <h2>Sensitive Action</h2> 675 <p>To see your account information, please confirm your identity.</p> 676 <input type="password" id="password_reauth_data" placeholder="Enter your password" /> 677 <p style="font-size: 14.5px; color: var(--error-text); display: none;" id="errorWithReauthenticating_email"></p> 678 679 <br /> 680 <br /> 681 682 <button onclick="seeData_reauth()" id="verifyEmail_verification">Verify</button> <button onclick='document.getElementById("editEmail").close()' id="cancelEmailReauthentication">Nevermind</button> 683 </dialog> 684 685 <dialog id="data"> 686 <h2>Your Account Data</h2> 687 <p>We know it looks like a lot, but note that most of these are to provide Auride to you. You can download this data as a JSON file. (On smaller screens, when you click "Show", please note that it'll show up on the right, so please scroll to the right to see the shown data)</p> 688 <button onclick="downloadData()" class="downloadData">Download my Data</button> <button onclick="document.getElementById('data').close()">Close</button> 689 690 <br /> 691 <br /> 692 693 <p id="dataDisplay"> 694 <i class="fa-solid fa-spinner fa-spin-pulse"></i> Fetching data... 695 </p> 696 697 <br /> 698 <br /> 699 700 <button onclick="downloadData()" id="downloadData">Download my Data</button> <button onclick="document.getElementById('data').close()">Close</button> 701 </dialog> 702 703 <dialog id="editPfp"> 704 <h2>Edit Profile Picture</h2> 705 <p>Change your profile picture to reflect your style.</p> 706 707 <br /> 708 709 <input type="file" accept="image/*" onsubmit="" id="pfpUploader" /> 710 <p style="color: var(--error-text); display: none; margin-top: 5px;" id="pfpError"></p> 711 <img id="pfpPreview-modal" draggable="false" style="width: 100px; height: 100px; border-radius: 50%; margin-top: 10px; display: none;"/> 712 713 <br /> 714 <br /> 715 716 <button onclick="confirmPfpChange()">Apply</button> <button onclick="document.getElementById('editPfp').close(); document.getElementById('pfpUploader').value = ''; document.getElementById('pfpError').textContent = ''; document.getElementById('pfpError').style.display = 'none'; document.getElementById('pfpPreview-modal').style.display = 'none'; document.getElementById('pfpPreview-modal').src = '';">Nevermind</button> 717 </dialog> 718 719 <dialog id="editBio"> 720 <h2>Edit Bio</h2> 721 <p>Your bio is your introduction - make it count!</p> 722 723 <br /> 724 725 <textarea placeholder="I'm ..., my pronouns are ... and I like ..."></textarea> 726 727 <p style="color: var(--error-text); display: none; margin-top: 5px;" id="bioError"></p> 728 729 <br /> 730 <br /> 731 732 <button onclick="confirmBioChange()">Apply</button> <button onclick="document.getElementById('editBio').close(); document.getElementById('bioText').value = '';">Nevermind</button> 733 </dialog> 734 735 <dialog id="editNsfw"> 736 <h2>Mature Content Preferences</h2> 737 <p>Would you like mature content to not show, be blurred, or show up completely uncensored?</p> 738 739 <br /> 740 741 <button onclick="nsfwPreferenceHide()" style="text-align: center; width: 100%;">Hide Mature Content</button> 742 743 <br /> 744 745 <button onclick="nsfwPreferenceBlur()" style="text-align: center; width: 100%;">Blur Mature Content</button> 746 747 <br /> 748 749 <button onclick="nsfwPreferenceShow()" style="text-align: center; width: 100%;">Show Mature Content</button> 750 751 <br /> 752 <br /> 753 754 <button onclick="document.getElementById('editNsfw').close();">Finish</button> 755 </dialog> 756 757 <dialog id="editSensitive"> 758 <h2>Sensitive Content Preferences</h2> 759 <p>Would you like sensitive content to not show, be blurred, or show up completely uncensored?</p> 760 761 <br /> 762 763 <button onclick="sensitivePreferenceHide()" style="text-align: center; width: 100%;">Hide Sensitive Content</button> 764 765 <br /> 766 767 <button onclick="sensitivePreferenceBlur()" style="text-align: center; width: 100%;">Blur Sensitive Content</button> 768 769 <br /> 770 771 <button onclick="sensitivePreferenceShow()" style="text-align: center; width: 100%;">Show Sensitive Content</button> 772 773 <br /> 774 <br /> 775 776 <button onclick="document.getElementById('editSensitive').close();">Finish</button> 777 </dialog> 778 779 <dialog id="editPolitical"> 780 <h2>Political Content Preferences</h2> 781 <p>Would you like political content to not show, be blurred, or show up completely uncensored?</p> 782 783 <br /> 784 785 <button onclick="politicalPreferenceHide()" style="text-align: center; width: 100%;">Hide Political Content</button> 786 787 <br /> 788 789 <button onclick="politicalPreferenceBlur()" style="text-align: center; width: 100%;">Blur Political Content</button> 790 791 <br /> 792 793 <button onclick="politicalPreferenceShow()" style="text-align: center; width: 100%;">Show Political Content</button> 794 795 <br /> 796 <br /> 797 798 <button onclick="document.getElementById('editPolitical').close();">Finish</button> 799 </dialog> 800 801 <dialog id="aurideThemes"> 802 <h2>Auride Themes</h2> 803 <p>All available Auride themes!</p> 804 805 <button onclick="document.getElementById('aurideThemes').close();">Nevermind</button> 806 807 <br /> 808 <br /> 809 810 <!-- Default --> 811 <div class="themeContainer" onclick="setTheme('Dark')"> 812 <img src="/assets/imgs/ThemeDark.png" alt="Dark theme on the home page" class="themeImage" /> 813 <div class="themeText">Dark</div> 814 <div class="themeDescription">Auride's default theme: sleek and clean.</div> 815 </div> 816 817 <!-- Mint Dark --> 818 <div class="themeContainer" onclick="setTheme('Mint (Dark)')"> 819 <img src="/assets/imgs/ThemeMintDark.png" alt="Mint (Dark) theme on the home page" class="themeImage" /> 820 <div class="themeText">Mint (Dark)</div> 821 <div class="themeDescription">A refreshing blend of minty dark hues.</div> 822 </div> 823 824 <!-- High Contrast --> 825 <div class="themeContainer" onclick="setTheme('High Contrast')"> 826 <img src="/assets/imgs/ThemeHighContrast.png" alt="High Contrast on the home page" class="themeImage" /> 827 <div class="themeText">High Contrast</div> 828 <div class="themeDescription">Bold and impactful, emphasizing sharp clarity and visibility.</div> 829 </div> 830 831 <!-- Midnight Purple --> 832 <div class="themeContainer" onclick="setTheme('Midnight Purple')"> 833 <img src="/assets/imgs/ThemeMidnightPurple.png" alt="Midnight Purple on the home page" class="themeImage" /> 834 <div class="themeText">Midnight Purple</div> 835 <div class="themeDescription">A calming shade of purple.</div> 836 </div> 837 838 <!-- Darker --> 839 <div class="themeContainer" onclick="setTheme('Darker')"> 840 <img src="/assets/imgs/ThemeDarker.png" alt="Darker on the home page" class="themeImage" /> 841 <div class="themeText">Darker</div> 842 <div class="themeDescription">A deeper shade, providing a more subdued and shadowed appearance.</div> 843 </div> 844 845 <!-- Light --> 846 <div class="themeContainer" onclick="setTheme('Light')"> 847 <img src="/assets/imgs/ThemeLight.png" alt="Light on the home page" class="themeImage" /> 848 <div class="themeText">Light</div> 849 <div class="themeDescription">A gentle and luminous theme, designed for clarity and ease.</div> 850 </div> 851 852 <!-- Mint Light --> 853 <div class="themeContainer" onclick="setTheme('Mint (Light)')"> 854 <img src="/assets/imgs/ThemeMintLight.png" alt="Mint (Light) on the home page" class="themeImage" /> 855 <div class="themeText">Mint (Light)</div> 856 <div class="themeDescription">A fresh and airy theme, blending minty hues with a light, refreshing touch. (This theme has poor accessibility)</div> 857 </div> 858 859 <!-- Classic --> 860 <div class="themeContainer" onclick="setTheme('TransSocial Classic')"> 861 <img src="/assets/imgs/ThemeClassic.png" alt="TransSocial Classic on the home page" class="themeImage" /> 862 <div class="themeText">TransSocial Classic</div> 863 <div class="themeDescription">The timeless and familiar theme that started it all. (This theme has poor accessibility)</div> 864 </div> 865 866 <!-- DEBUG (FOR REWRITING SETTINGS PAGE) --> 867 868 <br /> 869 <br /> 870 871 <button onclick="document.getElementById('aurideThemes').close();">Nevermind</button> 872 </dialog> 873 874 <dialog id="userThemes"> 875 <h2>User Themes</h2> 876 <p>Try themes by fellow Auride users!</p> 877 <button onclick="document.getElementById('userThemes').close();">Nevermind</button> 878 879 <br /> 880 <br /> 881 882 <div id="themeSelection"> 883 884 </div> 885 886 <br /> 887 888 <button onclick="document.getElementById('userThemes').close();">Nevermind</button> 889 </dialog> 890 891 <dialog id="changePassword"> 892 <h2 id="passwordResetEmailState">Sending Password Reset Email...</h2> 893 <p id="passwordResetEmailDesc">For security reasons, Auride is going to email you a password reset email.</p> 894 895 <br /> 896 897 <button onclick="document.getElementById('changePassword').close();">Close</button> 898 </dialog> 899 900 <dialog id="enableThemeExperiment"> 901 <h2>Enable Custom Theme Experiment?</h2> 902 <p>Custom themes are a work in progress. Please note that this may break at any time, with or without warning. This feature will not be finalized for a long time, if it releases.</p> 903 904 <br /> 905 906 <button onclick="enableCustomThemes()" style="text-align: center; width: 100%;">Enable Experiment</button> 907 908 <br /> 909 910 <button onclick="disableCustomThemes()" style="text-align: center; width: 100%;">Disable Experiment (This will break any custom theme you have enabled)</button> 911 912 <br /> 913 <br /> 914 915 <button onclick="document.getElementById('enableThemeExperiment').close();">Finish</button> 916 </dialog> 917 918 <dialog id="enableDirectMessages"> 919 <h2>Enable Direct Messages experiment?</h2> 920 <p>Direct Messages are a work in progress. Please note that in this current stage, anyone can message you (privacy settings will be added). This feature is a work-in-progress and will not be finalized for a very long time.</p> 921 922 <br /> 923 924 <button onclick="directMessagesEnable()" style="text-align: center; width: 100%;">Enable Experiment</button> 925 926 <br /> 927 928 <button onclick="directMessagesDisable()" style="text-align: center; width: 100%;">Disable Experiment (This will prevent anyone from DM'ing you)</button> 929 930 <br /> 931 <br /> 932 933 <button onclick="document.getElementById('enableDirectMessages').close();">Finish</button> 934 </dialog> 935 936 <dialog id="alreadyVerified"> 937 <h2><i class="fa-solid fa-circle-check"></i> Verified</h2> 938 <p>Oops! Looks like you're already in Auride's verification system! As much as we wish we could double-verify you because we're sure you're that cool, we can't. Maybe you'll have better luck next time!</p> 939 940 <br /> 941 942 <button onclick="document.getElementById('alreadyVerified').close();">Okay</button> 943 </dialog> 944 945 <dialog id="getVerified"> 946 <h2>Looking to get verified?</h2> 947 <p>You must meet the following requirements to get verified (as Auride grows, so will these requirements):</p> 948 949 <br /> 950 951 <p><i class="fa-solid fa-check"></i> Must have 5 high quality notes</p> 952 <p><i class="fa-solid fa-check"></i> Must have 5 followers</p> 953 <p><i class="fa-solid fa-check"></i> Your account can't be a parody account</p> 954 955 <br /> 956 957 <button onclick="submitVerificationRequest()">Submit Request</button> <button onclick="document.getElementById('getVerified').close();">Close</button> 958 </dialog> 959 960 <dialog id="verReqReceived"> 961 <h2>Thanks!</h2> 962 <p>We've received your request for verification. We'll look into it and see if you qualify for verification.</p> 963 964 <br /> 965 966 <button onclick="document.getElementById('verReqReceived').close();">Okay</button> 967 </dialog> 968 969 <dialog id="deleteAccountModal"> 970 <h2>Are you sure you want to delete your account?</h2> 971 <p> 972 This will delete all user data, including all notes and settings. Deleting your account cannot be undone. 973 <br> 974 Your username will be immediately available for anyone to use. 975 <br> 976 <br> 977 </p> 978 <span> 979 Pleae enter your password to proceed: 980 </span> 981 <input type="password" id="deleteAccountPassword" placeholder="Password"/> 982 <br> 983 <br> 984 <span> 985 Please also enter the phrase "Yes, please delete my account" 986 </span> 987 <input type="text" id="yesPleaseDeleteMyAccount" name="yesPleaseDeleteMyAccount" placeholder="Yes, please delete my account"/> 988 <br> 989 <p id="deleteAccountLog"></p> 990 <button onclick="document.getElementById('deleteAccountModal').close()">Cancel</button> 991 <button onclick="deleteAccount()" class="dangerButton">Delete</button> 992 </dialog> 993 </body> 994 </html>