Setup a page for my characters on FiveM, and js.

content/characters/index.html

@@ -0,0 +1,74 @@
+<main>
+  <div class="pl">
+    <div class="bgbox">
+      <ul class="plul">
+        <b
+          >Here is a list of all my GTA V RP characters, Click a name to see
+          their personalbackstory.</b
+        >
+        <li>
+          <a href="#" class="character-links" data-backstory="“{REDACTED}”"
+            >Kali Kent - Police Officer, Field Recruit</a
+          >
+        </li>
+        <li>
+          <a
+            href="#"
+            class="character-links"
+            data-backstory="“Riya had a lot of prior experience with being a Paramedic, She knew how to park emergency response vehicles the correct way. She spent a lot of time at the hospital hanging out with her friends when no calls were coming through dispatch. She loved to dance, She loved to Fish, and had a few cars. Riya had a loving fiance and loving friends, But the one thing she enjoyed the most was her job. The car she drove the most was her 2016 Lexus RX 350. Riya Anderson, May she rest in peace. March 1, 2000 - August 9, 2022”"
+            >Riya Anderson - Paramedic, Deceased</a
+          >
+        </li>
+        <li>
+          <a
+            href="#"
+            class="character-links"
+            data-backstory="“Leah Valentine.. She has lived in Roxwood most of her life, She recently decided to head to Los Santos, Where she can meet new people {LINE STOPS}~”"
+            >Leah Valentine - Unemployed, Criminal</a
+          >
+        </li>
+        <li>
+          <a
+            href="#"
+            class="character-links"
+            data-backstory="“Audrey is from the south end of Connecticut, She's calm, and Kind of crazy; Audrey “might” be the type of person you can “trust”, She used to run a small company in Connecticut called “Audrey Designs”, She sold custom painted vases, As well as custom t-shirts and a variety of other products, Her main goal at the current moment in time is to get her old business back up and running as it used to, Her hobbies consist of Fishing, Hunting, Sewing, Crochet, and similar. Audrey is especially always open to new ideas presented by others”"
+            >Audrey Remington - Unemployed, Civilian</a
+          >
+        </li>
+        <li>
+          <a
+            href="#"
+            class="character-links"
+            data-backstory="“Entry not found.”"
+            >Isabel Richards - Unemployed (prev. Doctor?), Civilian</a
+          >
+        </li>
+        <li>
+          <a
+            href="#"
+            class="character-links"
+            data-backstory="“Entry not found.”"
+            >Rhea Kay - Unemployed (prev. Police?), Civilian</a
+          >
+        </li>
+        <li>
+          <a
+            href="#"
+            class="character-links"
+            data-backstory="“Entry not found.”"
+            >Aaliyah Anderson - Unemployed, Civilian</a
+          >
+        </li>
+      </ul>
+      <div id="charpopup" class="charpopup">
+        <div class="charpopup-content">
+          <span class="close">&times;</span>
+          <b>Character Backstory:</b>
+          <p id="character-backstory-text"></p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="/assets/js/characters.js"></script>
+</main>

content/pages/index.html

@@ -9,7 +9,9 @@
       <li><a href="/discord">Discord</a> - Redirects you to my Discord.</li>
       <li><a href="/pages">Pages</a> - Takes you to this page.</li>
       <li><a href="/credits">Credits</a> - Takes you to my credits page.</li>
-      <li><a href="/readme">README</a> - Takes you to my README page.</li>
+      <li>
+        <a href="/characters">Characters</a> - Takes you to my characters page.
+      </li>
       <li>
         <a href="https://docs.mysty.one/">GitBook</a> - Takes you to my GitBook
         website.

static/assets/css/style.css

@@ -379,3 +379,37 @@ section:hover {
     padding: 10px;
   }
 }
+
+.charpopup {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.charpopup-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}

static/assets/js/characters.js

@@ -0,0 +1,18 @@
+document.querySelectorAll(".character-links").forEach((link) => {
+  link.onclick = function (event) {
+    event.preventDefault();
+    const backstory = this.getAttribute("data-backstory");
+    document.getElementById("character-backstory-text").innerText = backstory;
+    document.getElementById("charpopup").style.display = "block";
+  };
+});
+
+document.getElementsByClassName("close")[0].onclick = function () {
+  document.getElementById("charpopup").style.display = "none";
+};
+
+window.onclick = function (event) {
+  if (event.target == document.getElementById("charpopup")) {
+    document.getElementById("charpopup").style.display = "none";
+  }
+};