create_theme.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 | Theme Creation</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/ui/saveThemePopup.js", async: false }, 24 { src: "/assets/js/ui/publishThemePopup.js", async: false } 25 ).then(() => { 26 console.log("Scripts for /home have been loaded successfully."); 27 }).catch((error) => { 28 console.error("An error occurred: ", error, " please try refreshing."); 29 }); 30 </script> 31 </head> 32 33 <body onload="signedOutCheck()"> 34 <!-- Bottom Nav (mobile) --> 35 <!--<div class="mobileBottomNav" id="mobileBottomNav"> 36 <div class="nav"> 37 <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> 38 </div> 39 </div>--> 40 41 <!-- Note successfully sent --> 42 <div id="successfullySent" style="display: none;"><p>Note successfully sent!</p></div> 43 44 <!-- New Note Alert --> 45 <!--<div class="notesAlert" id="notesAlert"> 46 <p>New Notes</p> 47 </div>--> 48 49 <!-- Notes --> 50 <div class="notes" id="notes"> 51 <div class="newNotesAdded" id="newNotesAdded"> 52 <!-- Notes go here. This content is user-generated, no default HTML should be here. --> 53 </div> 54 55 <div class="noteFilter"> 56 <br /> 57 58 <h1>Create your own Auride theme! <span style="font-size: 15px;">(ALPHA)</span></h1> 59 <p>Want to spice up your Auride theme? Here's where you do exactly that! <span style="color: var(--text-semi-transparent);">Please note that this functionality is in alpha, there are many things that are yet to be added and the experience is just for testing.</span></p> 60 <p>An element that uses the color will be placed below the input. Also please note that some names are misleading, and may be used for more elements ("Note Background" is an example).</p> 61 62 <br /> 63 64 <h2>Colors</h2> 65 66 <label for="background">Background (Uses Hex)</label> 67 <input type="text" id="background" placeholder="#1d1d1d" style="width: 25%;" /> 68 <p>(No element provided. Entire background will change)</p> 69 70 <br /> 71 72 <label for="mainColor">Main Color (Uses Hex)</label> 73 <input type="text" id="mainColor" placeholder="#ff869a" style="width: 25%;" /> 74 <br /> 75 <button>Example of Main Color</button> 76 77 <br /> 78 <br /> 79 80 <label for="mainColorDarker">Main Color Darker (Uses Hex)</label> 81 <input type="text" id="mainColorDarker" placeholder="#e1788a" style="width: 25%;" /> 82 <br /> 83 <a style="color: var(--main-color-darker);">Hovered Link</a> 84 85 <br /> 86 <br /> 87 88 <label for="headerColor">Header Color (Uses Hex)</label> 89 <input type="text" id="headerColor" placeholder="#2d2d2d" style="width: 25%;" /> 90 <p>(No element provided. Header and sidebar will change colors)</p> 91 92 <br /> 93 94 <label for="text">Text (Uses Hex)</label> 95 <input type="text" id="text" placeholder="#fff" style="width: 25%;" /> 96 <p>(No element provided. All text, except on the sidebar/header, will change)</p> 97 98 <br /> 99 100 <label for="textHalfTransparent">Text Half Transparent (Uses RGB)</label> 101 <input type="text" id="textHalfTransparent" placeholder="255, 255, 255" style="width: 25%;" /> 102 <p style="color: var(--text-half-transparent);">This text is half transparent.</p> 103 104 <br /> 105 106 <label for="textSemiTransparent">Text Semi Transparent (Uses RGB)</label> 107 <input type="text" id="textSemiTransparent" placeholder="255, 255, 255" style="width: 25%;" /> 108 <p style="color: var(--text-semi-transparent);">This text is semi-transparent.</p> 109 110 <br /> 111 112 <label for="sidebarButtonHover">Sidebar Button Hover (Uses Hex)</label> 113 <input type="text" id="sidebarButtonHover" placeholder="#e1788a" style="width: 25%;" /> 114 <button style="width: 100%; background: var(--sidebar-button-hover); border: 0px;">Sidebar button</button> 115 116 <br /> 117 <br /> 118 119 <label for="buttonTransparentHover">Button Transparent Hover (Uses Hex)</label> 120 <input type="text" id="buttonTransparentHover" placeholder="#2d2d2d" style="width: 25%;" /> 121 <br /> 122 <button style="width: 100%; background: var(--button-transparent-hover); border: 0px;">Transparent Button Hovered</button> 123 124 <br /> 125 <br /> 126 127 <label for="successColor">Success Color (Uses Hex)</label> 128 <input type="text" id="successColor" placeholder="#00dc00" style="width: 25%;" /> 129 <p style="color: var(--success-color);">This action was successful!</p> 130 131 <br /> 132 133 <label for="warningText">Warning Text (Uses Hex)</label> 134 <input type="text" id="warningText" placeholder="#ffff00" style="width: 25%;" /> 135 <p style="color: var(--warning-text);">Uh oh. There's a warning.</p> 136 137 <br /> 138 139 <label for="errorText">Error Text (Uses Hex)</label> 140 <input type="text" id="errorText" placeholder="#ff0000" style="width: 25%;" /> 141 <p style="color: var(--error-text);">There was an error.</p> 142 143 <br /> 144 145 <label for="sidebarText">Sidebar Text (Uses Hex)</label> 146 <input type="text" id="sidebarText" placeholder="#fff" style="width: 25%;" /> 147 <p>(No element provided. Sidebar text will change color)</p> 148 149 <br /> 150 151 <label for="noteSeperator">Note Seperator (Uses Hex)</label> 152 <input type="text" id="noteSeperator" placeholder="#2d2d2d" style="width: 25%;" /> 153 <div style="width: 100%; background: var(--note-seperator); height: 5px; margin-top: 5px;"></div> 154 155 <br /> 156 157 <label for="likeColor">Like Color (Uses Hex)</label> 158 <input type="text" id="likeColor" placeholder="#ff0000" style="width: 25%;" /> 159 <br /> 160 <i class="fa-solid fa-heart" style="color: var(--like-color)"></i> 161 162 <br /> 163 <br /> 164 165 <label for="renoteColor">Renote Color (Uses Hex)</label> 166 <input type="text" id="renoteColor" placeholder="#84dd00" style="width: 25%;" /> 167 <br /> 168 <i class="fa-solid fa-retweet" style="color: var(--renote-color);"></i> 169 170 <br /> 171 172 <label for="replyBackground">Reply Background (Uses Hex)</label> 173 <input type="text" id="replyBackground" placeholder="#303030" style="width: 25%;" /> 174 <div class="replyToNote" style="width: 50%;">Reply</div> 175 176 <br /> 177 178 <label for="replyBackgroundHovered">Reply Background Hovered (Uses Hex)</label> 179 <input type="text" id="replyBackgroundHovered" placeholder="#3f3f3f" style="width: 25%;" /> 180 <div class="replyToNote" style="width: 50%; background: var(--reply-hovered-background);">Reply</div> 181 182 <br /> 183 184 <label for="noteBackground">Note Background (Uses Hex)</label> 185 <input type="text" id="noteBackground" placeholder="#282828" style="width: 25%;" /> 186 <div style="background: var(--note-background); height: 10px; width: 50%; margin-top: 5px;"></div> 187 188 <br /> 189 190 <label for="buttonText">Button Text Color (Uses Hex)</label> 191 <input type="text" id="buttonText" placeholder="#fff" style="width: 25%;" /> 192 <br/><button>Example Button</button> 193 194 <br /> 195 196 <label for="buttonTextHovered">Button Hovered Text Color (Uses Hex)</label> 197 <input type="text" id="buttonTextHovered" placeholder="#000" style="width: 25%;" /> 198 <p>(No element provided. Hover the button above to see changes)</p> 199 200 <br /> 201 202 <label for="sidebarCreateNoteButton">Sidebar Create Note Button Text Color (Uses Hex)</label> 203 <input type="text" id="sidebarCreateNoteButton" placeholder="#fff" style="width: 25%;" /> 204 <p>(No element provided. Sidebar "Create Note" button will change text color)</p> 205 206 <br /> 207 208 <label for="sidebarCreateNoteButtonHover">Sidebar Create Note Button Hovered Text Color (Uses Hex)</label> 209 <input type="text" id="sidebarCreateNoteButtonHover" placeholder="#000" style="width: 25%;" /> 210 <p>(No element provided. Hover Sidebar "Create Note" button to see changes)</p> 211 212 <div class="divider"></div> 213 214 <br /> 215 216 <button style="width: 100%;" onclick="saveTheme_Open()">Save Theme</button> 217 <p>Save your theme to configure later.</p> 218 219 <button style="width: 100%;" onclick="loadTheme()">Load Theme</button> 220 <p>Load a previously saved theme.</p> 221 222 <button style="width: 100%;" onclick="applyTheme()">Apply Theme</button> 223 <p>Apply the theme without publishing it to the Auride User Studio (useful for testing).</p> 224 225 <button style="width: 100%;" onclick="publishTheme_Open()">Publish</button> 226 <p>Let other people use your theme on the Auride User Studio!</p> 227 228 <br /> 229 <br /> 230 </div> 231 232 233 </div> 234 235 <!-- Auride Accounts --> 236 <div class="aurideAccounts"> 237 <h3>Auride Accounts</h3> 238 <p>Follow accounts associated with Auride.</p> 239 240 <div class="katniny"> 241 <!-- Me :3 --> 242 <div class="katniny"> 243 <img class="recommendAcc-pfp" src="" id="katninyPfp" draggable="false" /> <p id="katninyDisplay"></p> 244 <br /> <a href="/u" id="followBtn-1"><button class="followBtn">Follow</button></a> 245 <p id="katninyUser-pronouns"></p> 246 </div> 247 248 <br /> 249 250 <!-- Auride --> 251 <div class="auride"> 252 <img class="recommendAcc-pfp" src="" id="auridePfp" draggable="false" /> <p id="aurideDisplay"></p> 253 <br /> <a href="/u" id="followBtn-2"><button class="followBtn">Follow</button></a> 254 <p id="aurideUser-pronouns"></p> 255 </div> 256 257 <br /> 258 259 <!-- Katniny Studios --> 260 <div class="katninystudios"> 261 <img class="recommendAcc-pfp" src="" id="katninystudiosPfp" draggable="false" /> <p id="katninystudiosDisplay"></p> 262 <br /> <a href="/u" id="followBtn-3"><button class="followBtn">Follow</button></a> 263 <p id="katninystudiosUser-pronouns"></p> 264 </div> 265 </div> 266 </div> 267 268 <div class="policies"> 269 <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> 270 </div> 271 272 <div id="notSignedIn-banner"> 273 <p>Join the fun on Auride!</p> 274 <a href="/auth/login"><button>Login</button></a> 275 <a href="/auth/register"><button>Create an account</button></a> 276 </div> 277 278 <!-- Achievement Unlock --> 279 <div id="achievementUnlock" class="achievementUnlock" style="display: none;"> 280 <div id="achievementIcon"><i class="fa-solid fa-pencil"></i></div> <p id="achievementName">Achievement Name</p> 281 </div> 282 283 <dialog id="showAchievementUnlock"> 284 <h2 id="titleAndIcon">title and stuff</h2> 285 <p id="unlockReason">because you did</p> 286 <p id="unlockDate">m/d/y (the objectively correct way)</p> 287 <button onclick="document.getElementById('showAchievementUnlock').close();">Okay!</button> 288 </dialog> 289 290 <!-- Modals --> 291 292 293 <dialog id="signInPrompt"> 294 <img src="/assets/imgs/All_transparent.png" draggable="false" style="width: 450px; height: 100px; margin-left: 17%; margin-right: 15%;" /> 295 <h2>You must be signed in.</h2> 296 <p>To perform this action, you need to be signed into Auride!</p> 297 <br /> 298 <a href="/auth/login"><button>Login</button></a> 299 <div style="margin-top: 5px;"></div> 300 <a href="/auth/register"><button>Register</button></a> 301 </dialog> 302 303 <dialog id="openLink"> 304 <h2>Leaving Auride</h2> 305 <p>This link is taking you to the following website:</p> 306 307 <br /> 308 309 <p style="text-align: center;" id="linkyLink">https://link.com/</p> 310 311 <br /> 312 313 <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> 314 </dialog> 315 316 <dialog id="loadTheme"> 317 <h2>Load Theme</h2> 318 <p>Load a previously saved theme.</p> 319 320 <br /> 321 322 <p id="fetchingThemes"><i class="fa-solid fa-spinner fa-spin-pulse"></i> Loading themes...</p> 323 <div id="savedThemes"> 324 325 </div> 326 327 <br /> 328 329 <button onclick="document.getElementById('loadTheme').close()">Nevermind</button> 330 </dialog> 331 332 <dialog id="applyingTheme"> 333 <div id="applyingTheme_div"> 334 <h2>Please wait... we are currently applying your theme.</h2> 335 <p>This may take a moment. We appreciate your patience.</p> 336 </div> 337 338 <div id="finishedApplyingTheme" style="display: none;"> 339 <h2>Finished!</h2> 340 <p>Would you like to stay on this page or try your theme on another page?</p> 341 342 <br /> 343 344 <a href="/home"><button style="width: 100%;">Try theme on another page</button></a> 345 <button style="width: 100%;" onclick="document.getElementById('applyingTheme').close()">Stay on this page</button> 346 </div> 347 </dialog> 348 349 <dialog id="addAltText"> 350 <h2>Add Alt Text</h2> 351 <p>Help those with visual impairments or low vision understand what your note is.</p> 352 353 <textarea id="altText_input" placeholder="A fluffy orange cat sitting on a windowsill, licking its paw and grooming itself"></textarea> 354 355 <br /> 356 357 <button onclick="addAltText_finish()">Finish</button> 358 </dialog> 359 360 <dialog id="verifyEmail"> 361 <h2><i class="fa-solid fa-envelope-circle-check"></i> Please verify your email</h2> 362 <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> 363 <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> 364 365 <br /> 366 367 <button onclick="getVerificationEmail()" style="width: 100%;"><i class="fa-solid fa-check-to-slot"></i> Verify Email</button> 368 </dialog> 369 370 <dialog id="emailSent_emailVer"> 371 <h2><i class="fa-solid fa-envelope-circle-check"></i> Email sent!</h2> 372 <p>Once you verify your email, please click the button below to verify, then we won't bug you again!</p> 373 <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> 374 375 <br /> 376 377 <button onclick="window.location.reload()">Check Verification Status</button> 378 </dialog> 379 380 <dialog id="noteDeleted"> 381 <h2>Note Deleted</h2> 382 <p>Note was successfully deleted.</p> 383 384 <br /> 385 386 <button onclick="window.location.reload()">Okay</button> 387 </dialog> 388 389 <dialog id="noteUpdated"> 390 <h2>Note Updated</h2> 391 <p>Note was successfully updated.</p> 392 393 <br /> 394 395 <button onclick="window.location.reload()">Okay</button> 396 </dialog> 397 398 <dialog id="accountWarning"> 399 <h2>Account Warning</h2> 400 <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> 401 402 <br /> 403 404 <p style="color: var(--text-semi-transparent);">Reason: <span id="warningReason"></span></p> 405 406 <br /> 407 <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> 408 <p>You can continue using Auride after agreeing to our Terms of Service.</p> 409 410 <input type="checkbox" id="warningAgreeToTerms" style="width: 15px;"> I agree 411 <p style="color: var(--error-text); display: none;" id="warningAcknowledge">Please agree to the Terms before continuing.</p> 412 <br /> 413 <button onclick="acknowledgeWarning()">Continue using Auride</button> 414 </dialog> 415 </body> 416 </html>