Dynamically get pride flags

views/index.html

@@ -57,12 +57,7 @@
             ></small
           >
         </p>
-        <button
+        <button id="buttonflags" disabled>Cool Flags</button>
-          onclick="initDocument(['7F7F7F','C3C3C3','9AD9EA','FFFFFF','9AD9EA','C3C3C3','7F7F7F'], 300, 200, 'vert', 'Demiboy');
-          initDocument(['FF218C','FFD800','21B1FF'], 300, 200, 'vert', 'Pansexual')"
-        >
-          Cool Flags
-        </button>
       </section>
       <section id="fields"></section>
     </main>

views/scripts/data_get_whoami.js

@@ -3,6 +3,7 @@ const time = document.getElementById("time");
 const weekday = document.getElementById("weekday");
 const timezone = document.getElementById("timezone");
 const nofetchy = document.getElementById("no-fetchy");
+const buttonflags = document.getElementById("buttonflags");
 const fields = document.getElementById("fields");
 fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
   .then((x) => x.json())
@@ -19,6 +20,19 @@ fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
     timezone.innerHTML = `(UTC${user.utc_offset > 0 ? "+" : "-"}${Math.abs(
       user.utc_offset / (60 * 60)
     )})`;
+    buttonflags.onclick = () => {
+      user.flags.forEach((flag) => {
+        const props = flag.description.split(";");
+        initDocument(
+          props[0].split(","),
+          props[1],
+          props[2],
+          props[3],
+          flag.name
+        );
+      });
+    };
+    buttonflags.disabled = false;
     function updateTime() {
       curTime.setTime(
         Date.now() -

views/styles/normal.css

@@ -228,6 +228,12 @@ input[type="submit"]:active,
 input[type="reset"]:active {
   opacity: 0.5;
 }
+button:disabled,
+input[type="button"]:disabled,
+input[type="submit"]:disabled,
+input[type="reset"]:disabled {
+  opacity: 0.5;
+}
 
 /* -- Checkbox styling */