/ src / userstudio.html
userstudio.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 | User Studio</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"><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 id="noThemeSelected">
 56                      <br />
 57  
 58                      <h1><i class="fa-solid fa-palette"></i> Auride User Studio</h1>
 59                      <p>Find all the themes that fellow users on Auride have created!
 60                      <br/>Can't find a theme you want? You can always <a href="/create_theme" style="color: var(--main-color)">create one</a>!
 61                      </p>
 62                      <p style="color: var(--text-semi-transparent); font-size: 14px;">This feature is in alpha, along with custom themes. UI and features needs heavily improved, and will be available as soon as possible.</p>
 63  
 64                      <br />
 65  
 66                      <div id="availableThemes">
 67  
 68                      </div>
 69                  </div>
 70  
 71                  <div id="themeSelected" style="display: none;">
 72                      <br />
 73  
 74                      <h1><a href="/userstudio"><i class="fa-solid fa-arrow-left"></i></a></h1> <h1 id="themeName_title">Theme Title</h1>
 75                      <img src="/assets/imgs/themeimgunavailable.png" alt="Theme Image" id="themeImg" draggable="false" />
 76                      <h3 id="themeDesc">This is a fun, silly and long description for this theme.</h3>
 77                      <div id="legacyTheme" style="color: var(--warning-text); margin-top: 5px; margin-bottom: 5px;">
 78                          <i class="fa-solid fa-triangle-exclamation" style="color: var(--warning-text);"></i>
 79                          Core Theme: This theme still works in the latest version of Auride, but only features the core colors of Auride and does not feature the latest color additions. Some elements of Auride (such as text on hovered buttons) may be hard to see. 
 80                      </div>
 81                      <a id="themeCreator" href="/u" style="color: var(--main-color);">by {creator}</a>
 82  
 83                      <br />
 84                      <br />
 85  
 86                      <button id="installTheme">Get this theme</button>
 87  
 88                      <p style="font-size: 14px; color: var(--text-semi-transparent);">The store page is a work in progress.</p>
 89                  </div>
 90  
 91                  <div id="themeNotFound" style="display: none;">
 92                      <h1>Oops...</h1>
 93                      <h2>We were unable to find the item you were looking for.</h2>
 94                      <p>It's possible the theme got removed by Auride or never existed.</p>
 95  
 96                      <br />
 97  
 98                      <a href="/userstudio"><button>Find another theme</button></a>
 99                  </div>
100              </div>
101          </div>
102  
103          <!-- Auride Accounts -->
104          <div class="aurideAccounts">
105              <h3>Auride Accounts</h3>
106              <p>Follow accounts associated with Auride.</p>
107  
108              <div class="katniny">
109                  <!-- Me :3 -->
110                  <div class="katniny">
111                      <img class="recommendAcc-pfp" src="" id="katninyPfp" draggable="false" /> <p id="katninyDisplay"></p>
112                      <br /> <a href="/u" id="followBtn-1"><button class="followBtn">Follow</button></a>
113                      <p id="katninyUser-pronouns"></p>
114                  </div>
115  
116                  <br />
117  
118                  <!-- Auride -->
119                  <div class="auride">
120                      <img class="recommendAcc-pfp" src="" id="auridePfp" draggable="false" /> <p id="aurideDisplay"></p>
121                      <br /> <a href="/u" id="followBtn-2"><button class="followBtn">Follow</button></a>
122                      <p id="aurideUser-pronouns"></p>
123                  </div>
124  
125                  <br />
126  
127                  <!-- Katniny Studios -->
128                  <div class="katninystudios">
129                      <img class="recommendAcc-pfp" src="" id="katninystudiosPfp" draggable="false" /> <p id="katninystudiosDisplay"></p>
130                      <br /> <a href="/u" id="followBtn-3"><button class="followBtn">Follow</button></a>
131                      <p id="katninystudiosUser-pronouns"></p>
132                  </div>
133              </div>
134          </div>
135  
136          <div class="policies">
137              <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> 
138          </div>
139  
140          <div id="notSignedIn-banner">
141              <p>Join the fun on Auride!</p>
142              <a href="/auth/login"><button>Login</button></a>
143              <a href="/auth/register"><button>Create an account</button></a>
144          </div>
145  
146          <!-- Achievement Unlock -->
147          <div id="achievementUnlock" class="achievementUnlock" style="display: none;">
148              <div id="achievementIcon"><i class="fa-solid fa-pencil"></i></div> <p id="achievementName">Achievement Name</p>
149          </div>
150  
151          <dialog id="showAchievementUnlock">
152              <h2 id="titleAndIcon">title and stuff</h2>
153              <p id="unlockReason">because you did</p>
154              <p id="unlockDate">m/d/y (the objectively correct way)</p>
155              <button onclick="document.getElementById('showAchievementUnlock').close();">Okay!</button>
156          </dialog>
157  
158          <!-- Modals -->
159          <dialog id="signInPrompt">
160              <img src="/assets/imgs/All_transparent.png" draggable="false" style="width: 450px; height: 100px; margin-left: 17%; margin-right: 15%;" />
161              <h2>You must be signed in.</h2>
162              <p>To perform this action, you need to be signed into Auride!</p>
163              <br />
164              <a href="/auth/login"><button>Login</button></a>
165              <div style="margin-top: 5px;"></div>
166              <a href="/auth/register"><button>Register</button></a>
167          </dialog>
168  
169          <dialog id="openLink">
170              <h2>Leaving Auride</h2>
171              <p>This link is taking you to the following website:</p>
172  
173              <br />
174  
175              <p style="text-align: center;" id="linkyLink">https://link.com/</p>
176  
177              <br />
178  
179              <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>
180          </dialog>
181  
182          <dialog id="confirmAdding">
183              <h2>Successfully added theme!</h2>
184              <p>This theme has been added to your account. You can now go to your Personalization settings to enable it.</p>
185  
186              <br />
187  
188              <a href="/settings"><button>Go to settings</button></a> <a href="/userstudio"><button>Continue browsing themes</button></a>
189          </dialog>
190  
191          <dialog id="addAltText">
192              <h2>Add Alt Text</h2>
193              <p>Help those with visual impairments or low vision understand what your note is.</p>
194  
195              <textarea id="altText_input" placeholder="A fluffy orange cat sitting on a windowsill, licking its paw and grooming itself"></textarea>
196  
197              <br />
198  
199              <button onclick="addAltText_finish()">Finish</button>
200          </dialog>
201  
202          <dialog id="verifyEmail">
203              <h2><i class="fa-solid fa-envelope-circle-check"></i> Please verify your email</h2>
204              <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>
205              <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>
206  
207              <br />
208  
209              <button onclick="getVerificationEmail()" style="width: 100%;"><i class="fa-solid fa-check-to-slot"></i> Verify Email</button>
210          </dialog>
211  
212          <dialog id="emailSent_emailVer">
213              <h2><i class="fa-solid fa-envelope-circle-check"></i> Email sent!</h2>
214              <p>Once you verify your email, please click the button below to verify, then we won't bug you again!</p>
215              <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>
216  
217              <br />
218  
219              <button onclick="window.location.reload()">Check Verification Status</button>
220          </dialog>
221  
222          <dialog id="noteDeleted">
223              <h2>Note Deleted</h2>
224              <p>Note was successfully deleted.</p>
225  
226              <br />
227  
228              <button onclick="window.location.reload()">Okay</button>
229          </dialog>
230  
231          <dialog id="noteUpdated">
232              <h2>Note Updated</h2>
233              <p>Note was successfully updated.</p>
234  
235              <br />
236  
237              <button onclick="window.location.reload()">Okay</button>
238          </dialog>
239  
240          <dialog id="accountWarning">
241              <h2>Account Warning</h2>
242              <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>
243  
244              <br />
245  
246              <p style="color: var(--text-semi-transparent);">Reason: <span id="warningReason"></span></p>
247  
248              <br />
249              <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>
250              <p>You can continue using Auride after agreeing to our Terms of Service.</p>
251  
252              <input type="checkbox" id="warningAgreeToTerms" style="width: 15px;"> I agree
253              <p style="color: var(--error-text); display: none;" id="warningAcknowledge">Please agree to the Terms before continuing.</p>
254              <br />
255              <button onclick="acknowledgeWarning()">Continue using Auride</button>
256          </dialog>
257      </body>
258  </html>