Upload 6 files

css/styles.css

@@ -0,0 +1,1239 @@
+/*
+! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: currentColor;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+.top-2\.5 {
+  top: 0.625rem;
+}
+
+.top-\[90px\] {
+  top: 90px;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.mb-7 {
+  margin-bottom: 1.75rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-\[20px\] {
+  height: 20px;
+}
+
+.h-\[2px\] {
+  height: 2px;
+}
+
+.h-\[50px\] {
+  height: 50px;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.w-0 {
+  width: 0px;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-11\/12 {
+  width: 91.666667%;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-60 {
+  width: 15rem;
+}
+
+.w-7 {
+  width: 1.75rem;
+}
+
+.w-80 {
+  width: 20rem;
+}
+
+.w-\[20px\] {
+  width: 20px;
+}
+
+.w-\[50px\] {
+  width: 50px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.min-w-fit {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
+
+.max-w-5xl {
+  max-width: 64rem;
+}
+
+.max-w-6xl {
+  max-width: 72rem;
+}
+
+.max-w-md {
+  max-width: 28rem;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.origin-center {
+  transform-origin: center;
+}
+
+.origin-left {
+  transform-origin: left;
+}
+
+.-translate-x-10 {
+  --tw-translate-x: -2.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-0 {
+  --tw-rotate: -0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-0 {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-5 {
+  gap: 1.25rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.border-fublu-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(170 173 247 / var(--tw-border-opacity));
+}
+
+.border-fublu-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 54 157 / var(--tw-border-opacity));
+}
+
+.border-thunderbird-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(159 21 21 / var(--tw-border-opacity));
+}
+
+.bg-fublu-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 228 253 / var(--tw-bg-opacity));
+}
+
+.bg-fublu-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(202 205 251 / var(--tw-bg-opacity));
+}
+
+.bg-fublu-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(106 79 220 / var(--tw-bg-opacity));
+}
+
+.bg-fublu-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 54 157 / var(--tw-bg-opacity));
+}
+
+.bg-fublu-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(63 51 124 / var(--tw-bg-opacity));
+}
+
+.bg-thunderbird-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 60 60 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-9 {
+  padding-top: 2.25rem;
+  padding-bottom: 2.25rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-fublu-50 {
+  --tw-text-opacity: 1;
+  color: rgb(239 241 254 / var(--tw-text-opacity));
+}
+
+.text-fublu-600 {
+  --tw-text-opacity: 1;
+  color: rgb(106 79 220 / var(--tw-text-opacity));
+}
+
+.text-fublu-800 {
+  --tw-text-opacity: 1;
+  color: rgb(75 54 157 / var(--tw-text-opacity));
+}
+
+.text-thunderbird-50 {
+  --tw-text-opacity: 1;
+  color: rgb(255 241 241 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-fublu-200 {
+  --tw-shadow-color: #cacdfb;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.ring-0 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-fublu-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(170 173 247 / var(--tw-ring-opacity));
+}
+
+.ring-opacity-30 {
+  --tw-ring-opacity: 0.3;
+}
+
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.invert {
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.delay-100 {
+  transition-delay: 100ms;
+}
+
+.delay-300 {
+  transition-delay: 300ms;
+}
+
+.delay-75 {
+  transition-delay: 75ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.duration-500 {
+  transition-duration: 500ms;
+}
+
+.placeholder\:p-0::-moz-placeholder {
+  padding: 0px;
+}
+
+.placeholder\:p-0::placeholder {
+  padding: 0px;
+}
+
+.placeholder\:text-center::-moz-placeholder {
+  text-align: center;
+}
+
+.placeholder\:text-center::placeholder {
+  text-align: center;
+}
+
+.hover\:bg-fublu-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 228 253 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-fublu-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(121 107 233 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-fublu-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 74 197 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-thunderbird-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(228 30 30 / var(--tw-bg-opacity));
+}
+
+.hover\:ring-8:hover {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-fublu-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(121 107 233 / var(--tw-ring-opacity));
+}
+
+.focus-visible\:border-fublu-900:focus-visible {
+  --tw-border-opacity: 1;
+  border-color: rgb(63 51 124 / var(--tw-border-opacity));
+}
+
+.group:focus .group-focus\:w-12 {
+  width: 3rem;
+}
+
+.group:focus .group-focus\:translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:focus .group-focus\:translate-y-6 {
+  --tw-translate-y: 1.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:focus .group-focus\:-rotate-45 {
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:focus .group-focus\:rotate-45 {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:focus .group-focus\:ring-4 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+@media not all and (min-width: 768px) {
+  .max-md\:hidden {
+    display: none;
+  }
+
+  .max-md\:flex-col {
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 640px) {
+  .sm\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .sm\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .sm\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:h-4 {
+    height: 1rem;
+  }
+
+  .md\:h-8 {
+    height: 2rem;
+  }
+
+  .md\:w-32 {
+    width: 8rem;
+  }
+
+  .md\:w-4 {
+    width: 1rem;
+  }
+
+  .md\:w-8 {
+    width: 2rem;
+  }
+
+  .md\:w-80 {
+    width: 20rem;
+  }
+
+  .md\:justify-center {
+    justify-content: center;
+  }
+
+  .md\:gap-20 {
+    gap: 5rem;
+  }
+
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .md\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .md\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:mb-10 {
+    margin-bottom: 2.5rem;
+  }
+
+  .lg\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
+  .lg\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .lg\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .lg\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}

index.html

@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Random prompts generator with multiple options for Stable Diffusion and Midjourney, AI Art generators." />
+    <link href="css/styles.css" rel="stylesheet" />
+    <link rel="icon" type="image/x-icon" href="assets/images/favicon.png" />
+    <title>Stable Diffusion Prompts Generator</title>
+  </head>
+  <body class="pb-8 text-xs text-fublu-600 sm:text-base md:text-lg lg:text-xl">
+    <!--Nav wrapper-->
+    <div class="mb-7 lg:mb-10">
+      <nav class="flex items-center justify-between px-3 py-1 md:justify-center bg-fublu-800">
+        <!-- Desktop navbar -->
+        <ul class="flex items-center justify-center w-full max-w-5xl text-sm text-center lg:text-lg max-md:flex-col md:gap-20 text-fublu-50 max-md:hidden">
+          <li class="flex-1 px-4 py-2 transition-all rounded-md cursor-pointer hover:bg-fublu-700 randomLink"><a href="#" class="randomLink">Home</a></li>
+          <li class="flex-1 px-4 py-2 transition-all rounded-md cursor-pointer hover:bg-fublu-700 portraitLink"
+            ><a href="#" class="portraitLink">Portraits</a></li
+          >
+          <li class="flex-1 px-4 py-2 min-w-fit"
+            ><img src="assets/images/logo.webp" alt="Stable Diffusion Prompts Generator" class="m-auto" width="50px" height="50px"
+          /></li>
+
+          <li class="flex-1 px-4 py-2 transition-all rounded-md cursor-pointer hover:bg-fublu-700 landscapesLink"
+            ><a href="#" class="landscapesLink">Landscapes</a></li
+          >
+          <li class="flex-1 px-4 py-2 transition-all rounded-md cursor-pointer hover:bg-fublu-700 randomLink"><a href="#" class="randomLink">Random</a></li>
+        </ul>
+        <!-- End of desktop navbar -->
+        <!-- Mobile hamburger button -->
+        <div class="z-50 flex justify-between w-full px-2 py-4 md:hidden">
+          <img src="assets/images/logo.webp" alt="Stable Diffusion Prompts Generator" width="50px" height="50px" />
+          <button class="relative group" id="hamburgerButton" name="hamburgerButton" aria-label="Menu Button">
+            <div
+              class="relative flex overflow-hidden items-center justify-center rounded-full w-[50px] h-[50px] transform transition-all bg-slate-700 ring-0 ring-fublu-300 hover:ring-8 group-focus:ring-4 ring-opacity-30 duration-200"
+            >
+              <div class="flex flex-col justify-between w-[20px] h-[20px] transform transition-all duration-300 origin-center overflow-hidden">
+                <div class="bg-white h-[2px] w-7 transform transition-all duration-300 origin-left group-focus:translate-y-6 delay-100"></div>
+                <div class="bg-white h-[2px] w-7 rounded transform transition-all duration-300 group-focus:translate-y-6 delay-75"></div>
+                <div class="bg-white h-[2px] w-7 transform transition-all duration-300 origin-left group-focus:translate-y-6"></div>
+
+                <div
+                  class="absolute items-center justify-between transform transition-all duration-500 top-2.5 -translate-x-10 group-focus:translate-x-0 flex w-0 group-focus:w-12"
+                >
+                  <div class="absolute bg-white h-[2px] w-5 transform transition-all duration-500 rotate-0 delay-300 group-focus:rotate-45"></div>
+                  <div class="absolute bg-white h-[2px] w-5 transform transition-all duration-500 -rotate-0 delay-300 group-focus:-rotate-45"></div>
+                </div>
+              </div>
+            </div>
+          </button>
+        </div>
+        <!-- End of mobile hamburger button -->
+      </nav>
+      <!-- Mobile menu -->
+      <div class="fixed top-[90px] left-0 w-screen h-screen bg-opacity-70 bg-fublu-900 z-40 hidden" id="bgMobileMenu">
+        <nav class="flex items-center justify-between hidden px-3 pt-4 pb-8 md:justify-center bg-fublu-800" id="menuList">
+          <ul class="flex-col items-center justify-center w-full h-full max-w-5xl text-2xl text-center md:gap-20 text-fublu-50">
+            <li class="flex-1 px-4 py-2 transition-all rounded-md cursor-pointer hover:bg-fublu-700 randomLink"><a href="#" class="randomLink">Home</a></li>
+            <li class="flex-1 px-4 py-2 transition-all rounded-md cursor-pointer hover:bg-fublu-700 portraitLink"
+              ><a href="#" class="portraitLink">Portraits</a></li
+            >
+            <li class="flex-1 px-4 py-2 transition-all rounded-md cursor-pointer hover:bg-fublu-700 landscapesLink"
+              ><a href="#" class="landscapesLink">Landscapes</a></li
+            >
+            <li class="flex-1 px-4 py-2 transition-all rounded-md cursor-pointer hover:bg-fublu-700 randomLink"><a href="#" class="randomLink">Random</a></li>
+          </ul>
+        </nav>
+      </div>
+      <!-- End of mobile menu -->
+    </div>
+    <!--Nav end-->
+    <!--User's inputs-->
+    <div class="px-5 lg:px-20">
+      <!-- Portraits -->
+      <div class="flex flex-col items-center justify-center hidden text-center" id="portraitDiv">
+        <h2 class="mb-5 text-xl font-bold sm:text-3xl md:text-5xl lg:text-6xl">Portrait prompts generator</h2>
+        <section class="mb-4 text-base sm:text-lg md:text-xl">
+          <h3 class="mb-2 font-bold">Type of shot</h3>
+          <select name="portraitShotSelect" id="portraitShotSelect" class="p-2 text-center border-2 rounded-md border-fublu-800">
+            <option value="Random Shot" title="Choose a random type of portrait shot." selected>Random shot</option>
+            <option value="Full-Length Shot" title="A shot that shows the person or object in its complete environment.">Full-length shot</option>
+            <option value="American Shot" title="A shot that shows the person or object from the waist to the knees.">American shot</option>
+            <option value="Medium Shot" title="A shot that shows the person or object from the waist to the hips or knees.">Medium shot</option>
+            <option value="Close-Up Shot" title="A shot that shows the person or object up close, cut just above the shoulders or higher."
+              >Close-up shot</option
+            >
+            <option value="Extreme Close-Up Shot" title="A shot that shows a very specific part of the person or object, such as the eyes, mouth, or hands."
+              >Extreme close-up shot</option
+            >
+          </select>
+        </section>
+      </div>
+      <!-- Portraits End-->
+      <!-- Landscapes -->
+      <div class="flex flex-col items-center justify-center hidden text-center" id="landscapesDiv">
+        <h2 class="mb-5 text-xl font-bold sm:text-3xl md:text-5xl lg:text-6xl">Landscapes prompts generator</h2>
+        <section class="mb-4 text-base sm:text-lg md:text-xl">
+          <h3 class="mb-2 font-bold">Type of shot</h3>
+          <select name="landscapesShotSelect" id="landscapesShotSelect" class="p-2 text-center border-2 rounded-md border-fublu-800">
+            <option value="Random Shot" title="Choose a random type of portrait shot." selected>Random shot</option>
+            <option value="Long Shot" title="A shot that shows an overall view of the landscape.">Long shot</option>
+            <option value="Medium Shot" title="A shot that shows a specific part of the landscape, such as a mountain or a valley.">Medium shot</option>
+            <option value="Close-Up Shot" title="A shot that shows a particular element of the landscape, such as a flower or a rock.">Close-up shot</option>
+            <option
+              value="Extreme Close-Up Shot"
+              title="A shot that shows a very specific detail of the landscape, such as the texture of a tree or the shape of clouds."
+              >Extreme close-up shot</option
+            >
+          </select>
+        </section>
+      </div>
+      <!-- Landscapes End-->
+      <!-- Random -->
+      <div class="flex flex-col items-center justify-center text-center" id="randomDiv">
+        <h2 class="mb-5 text-xl font-bold sm:text-3xl md:text-5xl lg:text-6xl">Random prompts generator</h2>
+      </div>
+      <!-- Random End-->
+      <!-- Num of prompts & show generator's options -->
+      <div class="flex items-center justify-center mb-5">
+        <section class="flex flex-col items-center justify-center text-base text-center sm:text-lg md:text-xl w-80 placeholder:p-0 placeholder:text-center">
+          <h3 class="mb-4 font-bold">How many prompts to generate</h3>
+          <input
+            type="text"
+            id="promptsNumberInput"
+            name="promptsNumberInput"
+            value="10"
+            title="How many prompts you want to generate"
+            class="w-24 px-2 py-1 mb-5 text-center border-2 border-solid rounded-md md:w-32 border-fublu-800"
+          />
+          <button
+            class="p-4 border-2 rounded-md text-fublu-800 md:w-80 bg-fublu-200 hover:bg-fublu-100 border-fublu-800"
+            id="generatorOptionsButton"
+            aria-label="Show options"
+            >Show options</button
+          >
+        </section>
+      </div>
+      <!-- Enf of num of prompts & show generator's options -->
+      <!-- Hidden inputs -->
+      <div class="flex flex-col items-center hidden mb-7" id="inputsDisclaimer">
+        <p class="mb-5 text-center"
+          >* All inputs are optional. If you leave them empty, random ideas from our lists will replace them accordingly to their core concept (places,
+          characters, objects, artists...).</p
+        >
+        <button
+          class="p-4 border-2 rounded-md text-thunderbird-50 md:w-80 bg-thunderbird-500 hover:bg-thunderbird-600 border-thunderbird-800"
+          id="resetInputsButton"
+          aria-label="Reset inputs"
+          >Reset inputs</button
+        >
+      </div>
+      <div class="flex flex-wrap justify-center hidden gap-5 mb-8" id="generatorOptionsDiv">
+        <section class="flex flex-col flex-1 max-w-md mb-3" id="charactersInputDiv">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <h3 class="font-bold text-center">Characters</h3>
+          </div>
+          <textarea
+            id="charactersTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add characters to the generator, one per line (e.g. Medusa, Dog, Hercules...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+        <section class="flex flex-col flex-1 max-w-md mb-3" id="objectsInputDiv">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <input
+              type="checkbox"
+              name="objectsActive"
+              id="objectsActive"
+              checked
+              class="align-middle rounded md:w-4 md:h-4 text-fublu-600 bg-fublu-900 border-fublu-300 focus:ring-fublu-500 focus:ring-2"
+            /><h3 class="font-bold text-center">Objects</h3>
+          </div>
+          <textarea
+            id="objectsTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add Objects to the generator, one per line (e.g. Pan, Sword, Helmet...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+        <section class="flex flex-col flex-1 max-w-md mb-3">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <input
+              type="checkbox"
+              name="placesActive"
+              id="placesActive"
+              checked
+              class="align-middle rounded md:w-4 md:h-4 text-fublu-600 bg-fublu-900 border-fublu-300 focus:ring-fublu-500 focus:ring-2"
+            />
+            <h3 class="font-bold text-center">Places</h3>
+          </div>
+          <textarea
+            id="placesTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add places to the generator, one per line (e.g. Hidden Cave, Space Station, Underwater City...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+        <section class="flex flex-col flex-1 max-w-md mb-3">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <input
+              type="checkbox"
+              name="artistsActive"
+              id="artistsActive"
+              checked
+              class="align-middle rounded md:w-4 md:h-4 text-fublu-600 bg-fublu-900 border-fublu-300 focus:ring-fublu-500 focus:ring-2"
+            />
+            <h3 class="font-bold text-center">Artists</h3>
+            <input
+              type="number"
+              min="1"
+              max="5"
+              value="1"
+              class="w-10 text-sm text-center border-2 border-solid rounded-md md:text-base border-fublu-800"
+              title="How many artists do you want to include in the prompt ? (max: 5)"
+              id="numArtists"
+            />
+          </div>
+          <textarea
+            id="artistsTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add artists to the generator, one per line (e.g. Makoto Shinkai, Artgerm, Rebeca Saray...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+        <section class="flex flex-col flex-1 max-w-md mb-3">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <input
+              type="checkbox"
+              name="stylesActive"
+              id="stylesActive"
+              checked
+              class="align-middle rounded md:w-4 md:h-4 text-fublu-600 bg-fublu-900 border-fublu-300 focus:ring-fublu-500 focus:ring-2"
+            />
+            <h3 class="font-bold text-center">Styles &amp; Mediums</h3>
+            <input
+              type="number"
+              min="1"
+              max="3"
+              value="1"
+              class="w-10 text-sm text-center border-2 border-solid rounded-md md:text-base border-fublu-800"
+              title="How many styles and mediums do you want to include in the prompt ? (max: 3)"
+              id="numStyles"
+            />
+          </div>
+          <textarea
+            id="stylesTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add styles and mediums to the generator, one per line (e.g. Anime, Futurism, Woodcut Print...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+        <section class="flex flex-col flex-1 max-w-md mb-5">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <input
+              type="checkbox"
+              name="colorsActive"
+              id="colorsActive"
+              checked
+              class="align-middle rounded md:w-4 md:h-4 text-fublu-600 bg-fublu-900 border-fublu-300 focus:ring-fublu-500 focus:ring-2"
+            />
+            <h3 class="font-bold text-center">Colors</h3>
+          </div>
+          <textarea
+            id="colorsTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add colors to the generator, one per line (e.g. Black and White, Complimentary Colors, Sepia...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+        <section class="flex flex-col flex-1 max-w-md mb-5">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <input
+              type="checkbox"
+              name="adjectivesActive"
+              id="adjectivesActive"
+              checked
+              class="align-middle rounded md:w-4 md:h-4 text-fublu-600 bg-fublu-900 border-fublu-300 focus:ring-fublu-500 focus:ring-2"
+            />
+            <h3 class="font-bold text-center">Adjectives</h3>
+          </div>
+          <textarea
+            id="adjectivesTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add adjectives to the generator, one per line (e.g. Mystic, Heavenly, Majestic...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+        <section class="flex flex-col flex-1 max-w-md mb-5" id="elementsInputDiv">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <input
+              type="checkbox"
+              name="elementsActive"
+              id="elementsActive"
+              checked
+              class="align-middle rounded md:w-4 md:h-4 text-fublu-600 bg-fublu-900 border-fublu-300 focus:ring-fublu-500 focus:ring-2"
+            />
+            <h3 class="font-bold text-center">Elements</h3>
+          </div>
+          <textarea
+            id="elementsTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add elements to the generator, one per line (e.g. Water, Ice, Fire...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+        <section class="flex flex-col flex-1 max-w-md mb-5">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <input
+              type="checkbox"
+              name="improversActive"
+              id="improversActive"
+              checked
+              class="align-middle rounded md:w-4 md:h-4 text-fublu-600 bg-fublu-900 border-fublu-300 focus:ring-fublu-500 focus:ring-2"
+            />
+            <h3 class="font-bold text-center">Improvers</h3>
+          </div>
+          <textarea
+            id="improversTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add improvers to the generator, one per line (e.g. trending on Artstation, masterpiece...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+        <section class="flex flex-col flex-1 max-w-md mb-5" id="prefixesInputDiv">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <input
+              type="checkbox"
+              name="prefixesActive"
+              id="prefixesActive"
+              checked
+              class="align-middle rounded md:w-4 md:h-4 text-fublu-600 bg-fublu-900 border-fublu-300 focus:ring-fublu-500 focus:ring-2"
+            />
+            <h3 class="font-bold text-center">Prefixes</h3>
+          </div>
+          <textarea
+            id="prefixesTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add prefixes to the generator, one per line (e.g. zombie, superhero, wizard...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+        <section class="flex flex-col flex-1 max-w-md mb-5" id="suffixesInputDiv">
+          <div class="flex items-center justify-center gap-4 mb-4">
+            <input
+              type="checkbox"
+              name="suffixesActive"
+              id="suffixesActive"
+              checked
+              class="align-middle rounded md:w-4 md:h-4 text-fublu-600 bg-fublu-900 border-fublu-300 focus:ring-fublu-500 focus:ring-2"
+            />
+            <h3 class="font-bold text-center">Suffixes</h3>
+          </div>
+          <textarea
+            id="suffixesTextArea"
+            cols="30"
+            rows="4"
+            placeholder="Add suffixes to the generator, one per line (e.g. dancing, flying, summoning...)"
+            class="p-3 border-2 rounded-md shadow-sm placeholder:p-0 placeholder:text-center border-fublu-800 focus-visible:border-fublu-900 shadow-fublu-200"
+          ></textarea>
+        </section>
+      </div>
+      <!-- End of hidden inputs -->
+      <!-- Generate prompts button -->
+      <div class="flex justify-center mb-8">
+        <button
+          class="p-4 text-white border-2 rounded-md w-60 bg-fublu-600 hover:bg-fublu-500 border-fublu-800"
+          id="generatePromptsButton"
+          aria-label="Generate prompts"
+          >Generate prompts</button
+        >
+      </div>
+      <!-- End of generate prompts button -->
+    </div>
+    <!-- End of user's inputs -->
+    <!-- Prompts -->
+    <div class="relative w-11/12 max-w-6xl p-3 mx-auto mb-10 text-center border-2 rounded-md shadow-sm py-9 bg-fublu-100 border-fublu-800 shadow-fublu-200">
+      <button class="absolute text-xs top-2 right-2 md:text-sm" id="promptsCopyButton" aria-label="Copy Prompts"
+        ><img src="assets/icons/copypaste.png" alt="Copy" title="Copy prompts" class="w-5 h-5 md:h-8 md:w-8" width="32px" height="32px"
+      /></button>
+      <div class="w-full text-xs md:text-sm lg:text-base text-fublu-800" id="prompts"></div>
+    </div>
+    <!-- End of prompts -->
+    <!-- Credits -->
+    <div class="flex flex-col items-center justify-center">
+      <p class=""
+        >Made by <span class="font-bold">Kevin Mulier</span> | <a href="https://github.com/kevinmulier" class="font-bold">GitHub</a> |
+        <a href="https://twitter.com/KevinMulierDev" class="font-bold">Twitter</a></p
+      >
+    </div>
+    <!-- End of credits -->
+    <script src="js/main.js"></script>
+  </body>
+</html>

js/main.js

@@ -0,0 +1,1834 @@
+class PromptGenerator {
+  constructor() {
+    this.currentPrompts = [];
+    this.promptsDiv = document.querySelector("#prompts");
+    this.textArea = document.createElement("textarea");
+    this.portraitDiv = document.querySelector("#portraitDiv");
+    this.landscapesDiv = document.querySelector("#landscapesDiv");
+    this.randomDiv = document.querySelector("#randomDiv");
+    this.generatorOptionsButton = document.querySelector("#generatorOptionsButton");
+    this.generatorOptionsDiv = document.querySelector("#generatorOptionsDiv");
+    this.inputsDisclaimer = document.querySelector("#inputsDisclaimer");
+    this.charactersInputDiv = document.querySelector("#charactersInputDiv");
+    this.objectsInputDiv = document.querySelector("#objectsInputDiv");
+    this.shownOptions = 0;
+    this.currentGenerator = "random";
+    this.currentCharacters = [];
+    this.currentObjects = [];
+    this.currentPlaces = [];
+    this.currentArtists = [];
+    this.currentStyles = [];
+    this.currentColors = [];
+    this.currentAdjectives = [];
+    this.currentElements = [];
+    this.currentImprovers = [];
+    this.currentPrefixes = [];
+    this.currentSuffixes = [];
+  }
+
+  generatePrompt() {
+    // Determine if the prompt will have prefix
+    const isPrefixePrompt = Math.random() < 0.25;
+
+    // Determine if the prompt will have suffix
+    const isSuffixPrompt = Math.random() < 0.1;
+
+    // Check if the current generator is for portraits
+    const isPortraitPrompt = this.currentGenerator === "portrait";
+
+    // Get the selected portrait shot from the HTML select element
+    const selectedPortraitShot = document.querySelector("#portraitShotSelect").value;
+
+    // Define options for portrait shot types
+    const portraitShotOptions = ["Full-Length Shot", "American Shot", "Medium Shot", "Close-Up Shot", "Extreme Close-Up Shot"];
+
+    // Randomly select a portrait shot type
+    const randomizedPortraitShot = portraitShotOptions[Math.floor(Math.random() * portraitShotOptions.length)];
+
+    // Check if the current generator is for landscapes
+    const isLandscapesPrompt = this.currentGenerator === "landscapes";
+
+    // Get the selected landscapes shot from the HTML select element
+    const selectedLandscapesShot = document.querySelector("#landscapesShotSelect").value;
+
+    // Define options for landscape shot types
+    const landscapesShotOptions = ["Long Shot", "Medium Shot", "Close-Up Shot", "Extreme Close-Up Shot"];
+
+    // Randomly select a landscape shot type
+    const randomizedLandscapesShot = landscapesShotOptions[Math.floor(Math.random() * landscapesShotOptions.length)];
+
+    // Check whether various types of prompts are active based on checkbox values
+    const isObjectsActive = document.querySelector("#objectsActive").checked;
+    const isPlacesActive = document.querySelector("#placesActive").checked;
+    const isArtistsActive = document.querySelector("#artistsActive").checked;
+    const isStylesActive = document.querySelector("#stylesActive").checked;
+    const isColorsActive = document.querySelector("#colorsActive").checked;
+    const isAdjectivesActive = document.querySelector("#adjectivesActive").checked;
+    const isElementsActive = document.querySelector("#elementsActive").checked;
+    const isImproversActive = document.querySelector("#improversActive").checked;
+    const isPrefixesActive = document.querySelector("#prefixesActive").checked;
+    const isSuffixesActive = document.querySelector("#suffixesActive").checked;
+
+    // Initialize prompt and mainSubject variables
+    let prompt = "";
+    let mainSubject = "";
+
+    // Hide the "Places" checkbox if generating a landscapes prompt
+    if (isLandscapesPrompt) {
+      document.querySelector("#placesActive").classList.add("hidden");
+    } else {
+      document.querySelector("#placesActive").classList.remove("hidden");
+    }
+
+    // Get value from artists and styles number inputs
+    let numArtists = Number(document.querySelector("#numArtists").value);
+    let numStyles = Number(document.querySelector("#numStyles").value);
+
+    //  initialize artists prompt & styles prompt parts
+    let artistsPrompt = "";
+    let stylesPrompt = "";
+
+    // set content of artists & styles prompts parts depending on user number inputs
+    for (let i = 0; i < numArtists; i++) {
+      if (i < this.currentArtists.length) {
+        artistsPrompt += `${this.randomElement(this.currentArtists.filter((artist) => !artistsPrompt.includes(artist)))}, `;
+      }
+    }
+    artistsPrompt = artistsPrompt.slice(0, -2);
+
+    for (let i = 0; i < numStyles; i++) {
+      if (i < this.currentStyles.length) {
+        stylesPrompt += `${this.randomElement(this.currentStyles.filter((style) => !stylesPrompt.includes(style)))}, `;
+      }
+    }
+    stylesPrompt = stylesPrompt.slice(0, -2);
+
+    if (isPortraitPrompt) {
+      if (selectedPortraitShot !== "Random Shot") {
+        // if a specific portrait shot is selected, add it to the prompt
+        prompt += selectedPortraitShot + " ";
+      } else {
+        // otherwise, randomly choose whether to add a randomized portrait shot to the prompt
+        prompt += Math.random() < 0.33 ? " " : `${randomizedPortraitShot} `;
+      }
+    } else if (isLandscapesPrompt) {
+      if (selectedLandscapesShot !== "Random Shot") {
+        // if a specific landscape shot is selected, add it to the prompt
+        prompt += selectedLandscapesShot + " ";
+      } else {
+        // otherwise, randomly choose whether to add a randomized landscape shot to the prompt
+        prompt += Math.random() < 0.33 ? " " : `${randomizedLandscapesShot} `;
+      }
+    }
+
+    if (prompt.length > 1) {
+      // if prompt has content, add "of" to the end of the prompt
+      prompt += "of ";
+    }
+
+    if (!isLandscapesPrompt) {
+      if ((isPrefixePrompt && isPrefixesActive) || this.currentPrefixes[0] !== prefixes[0]) {
+        // if is a prefix prompt, add a random prefix
+        prompt += `${this.randomElement(this.currentPrefixes)} `;
+      }
+
+      if (isObjectsActive && Math.random() < 0.1 && this.currentCharacters[0] === characters[0]) {
+        // if objects are active, can add a random object as the main subject of the prompt
+        mainSubject = this.randomElement(this.currentObjects);
+        prompt += `${mainSubject}`;
+      } else {
+        // otherwise, add a random character as the main subject of the prompt, possibly with a random object
+        mainSubject = this.randomElement(this.currentCharacters);
+        if (Math.random() < 0.25 || this.currentObjects[0] !== objects[0]) {
+          if (isObjectsActive) {
+            prompt += `${mainSubject} with ${this.randomElement(this.currentObjects)}`;
+          } else {
+            prompt += `${mainSubject}`;
+          }
+        } else {
+          prompt += `${mainSubject}`;
+        }
+      }
+
+      // adds a random element to the prompt if element prompt is active
+      if (isElementsActive) {
+        prompt += ` of ${this.randomElement(this.currentElements)}`;
+      }
+
+      if ((isSuffixPrompt && isSuffixesActive) || this.currentSuffixes[0] !== suffixes[0]) {
+        // if is a suffix prompt, add a random suffix
+        prompt += ` ${this.randomElement(this.currentSuffixes)}`;
+      }
+    }
+
+    // adds a random place to the prompt if landscape prompt is active, or a random place after the main subject if place prompt is active
+    if (isLandscapesPrompt) {
+      prompt += `${this.randomElement(this.currentPlaces)}`;
+    } else if (isPlacesActive) {
+      prompt += `, ${this.randomElement(this.currentPlaces)}`;
+    }
+
+    // Add a artists and/or styles to the prompt
+    if (isArtistsActive && isStylesActive) {
+      prompt += `, ${stylesPrompt} in ${artistsPrompt} style`;
+    } else if (isArtistsActive) {
+      prompt += `, ${artistsPrompt} style`;
+    } else if (isStylesActive) {
+      prompt += `, ${stylesPrompt}`;
+    }
+
+    // adds random adjectives to the prompt if adjective prompt is active
+    if (isAdjectivesActive) {
+      const adjective1 = this.randomElement(this.currentAdjectives);
+      prompt += `, ${adjective1}`;
+      if (this.currentAdjectives.length > 1) {
+        prompt += `, ${this.randomElement(this.currentAdjectives.filter((adjective) => adjective !== adjective1))}`;
+      }
+    }
+
+    // add improvers to the prompt if improver prompt is active
+    if (isImproversActive) {
+      prompt += `, ${this.randomElement(this.currentImprovers)}`;
+    }
+
+    // adds a random color palette to the prompt if color prompt is active
+    if (isColorsActive) {
+      prompt += `, ${this.randomElement(this.currentColors)}`;
+    }
+
+    // add the prompt to the arrays of prompts
+    this.currentPrompts.push(prompt);
+  }
+
+  generatePrompts(num) {
+    // Clears out any existing prompts in the currentPrompts array and in the promptsDiv element.
+    this.currentPrompts = [];
+    this.promptsDiv.innerHTML = "";
+
+    // Replaces the default arrays used for generating prompts with any user-provided input arrays, if available.
+    this.replaceArraysWithUserInputs.bind(this);
+    this.replaceArraysWithUserInputs();
+
+    // Generates the prompts by calling the generatePrompt() function a specified number of times.
+    for (let i = 0; i < num; i++) {
+      this.generatePrompt();
+    }
+
+    // Creates a temporary document fragment and appends each new prompt line to it.
+    const tempDocumentFragment = document.createDocumentFragment();
+    for (let i = 0; i < this.currentPrompts.length; i++) {
+      const newPromptLine = document.createElement("p");
+      newPromptLine.classList.add("py-3");
+      newPromptLine.textContent = `${this.currentPrompts[i]}`;
+      tempDocumentFragment.appendChild(newPromptLine);
+    }
+
+    // Appends the entire temporary document fragment to the promptsDiv element in a single operation, which enhances performance.
+    this.promptsDiv.appendChild(tempDocumentFragment);
+  }
+
+  showChosenGenerator() {
+    // Hide all generator divs and show input divs
+    this.portraitDiv.classList.add("hidden");
+    this.landscapesDiv.classList.add("hidden");
+    this.randomDiv.classList.add("hidden");
+    this.charactersInputDiv.classList.remove("hidden");
+    this.objectsInputDiv.classList.remove("hidden");
+    document.querySelector("#elementsInputDiv").classList.remove("hidden");
+    document.querySelector("#prefixesInputDiv").classList.remove("hidden");
+    document.querySelector("#suffixesInputDiv").classList.remove("hidden");
+
+    // Show places, prefixes and suffixes input divs and hide if current generator is landscapes
+    document.querySelector("#placesActive").classList.remove("hidden");
+
+    // Show the chosen generator div based on current generator variable
+    if (this.currentGenerator === "portrait") {
+      this.portraitDiv.classList.remove("hidden");
+    } else if (this.currentGenerator === "landscapes") {
+      this.landscapesDiv.classList.remove("hidden");
+      this.charactersInputDiv.classList.add("hidden");
+      this.objectsInputDiv.classList.add("hidden");
+      document.querySelector("#elementsInputDiv").classList.add("hidden");
+      document.querySelector("#prefixesInputDiv").classList.add("hidden");
+      document.querySelector("#suffixesInputDiv").classList.add("hidden");
+      document.querySelector("#placesActive").classList.add("hidden");
+    } else if (this.currentGenerator === "random") {
+      this.randomDiv.classList.remove("hidden");
+    }
+  }
+
+  // Select a random element inside the array
+  randomElement(array) {
+    return array[Math.floor(Math.random() * array.length)];
+  }
+
+  // Copy the prompts to clipboard
+  copyPromptsToClipboard(promptsArray) {
+    this.textArea.textContent = promptsArray.join("\n");
+    navigator.clipboard.writeText(this.textArea.textContent);
+  }
+
+  // check if textArea are empty
+  checkUserArraysInputs(textArea) {
+    return textArea.value !== "";
+  }
+
+  // Check if user has put inputs, and then assign them to their respective arrays
+  replaceArraysWithUserInputs() {
+    const charactersInput = document.querySelector("#charactersTextArea");
+    const objectsInput = document.querySelector("#objectsTextArea");
+    const placesInput = document.querySelector("#placesTextArea");
+    const artistsInput = document.querySelector("#artistsTextArea");
+    const stylesInput = document.querySelector("#stylesTextArea");
+    const colorsInput = document.querySelector("#colorsTextArea");
+    const adjectivesInput = document.querySelector("#adjectivesTextArea");
+    const elementsInput = document.querySelector("#elementsTextArea");
+    const improversInput = document.querySelector("#improversTextArea");
+    const prefixesInput = document.querySelector("#prefixesTextArea");
+    const suffixesInput = document.querySelector("#suffixesTextArea");
+
+    if (this.checkUserArraysInputs(charactersInput)) {
+      this.currentCharacters = charactersInput.value.split(/\r?\n/);
+      localStorage.setItem("characters", charactersInput.value);
+    } else {
+      this.currentCharacters = [...characters];
+      localStorage.setItem("characters", "");
+    }
+
+    if (this.checkUserArraysInputs(objectsInput)) {
+      this.currentObjects = objectsInput.value.split(/\r?\n/);
+      localStorage.setItem("objects", objectsInput.value);
+    } else {
+      this.currentObjects = [...objects];
+      localStorage.setItem("objects", "");
+    }
+
+    if (this.checkUserArraysInputs(placesInput)) {
+      this.currentPlaces = placesInput.value.split(/\r?\n/);
+      localStorage.setItem("places", placesInput.value);
+    } else {
+      this.currentPlaces = [...places];
+      localStorage.setItem("places", "");
+    }
+
+    if (this.checkUserArraysInputs(artistsInput)) {
+      this.currentArtists = artistsInput.value.split(/\r?\n/);
+      localStorage.setItem("artists", artistsInput.value);
+    } else {
+      this.currentArtists = [...artists];
+      localStorage.setItem("artists", "");
+    }
+
+    if (this.checkUserArraysInputs(stylesInput)) {
+      this.currentStyles = stylesInput.value.split(/\r?\n/);
+      localStorage.setItem("styles", stylesInput.value);
+    } else {
+      this.currentStyles = [...styles];
+      localStorage.setItem("styles", "");
+    }
+
+    if (this.checkUserArraysInputs(colorsInput)) {
+      this.currentColors = colorsInput.value.split(/\r?\n/);
+      localStorage.setItem("colors", colorsInput.value);
+    } else {
+      this.currentColors = [...colors];
+      localStorage.setItem("colors", "");
+    }
+
+    if (this.checkUserArraysInputs(adjectivesInput)) {
+      this.currentAdjectives = adjectivesInput.value.split(/\r?\n/);
+      localStorage.setItem("adjectives", adjectivesInput.value);
+    } else {
+      this.currentAdjectives = [...adjectives];
+      localStorage.setItem("adjectives", "");
+    }
+
+    if (this.checkUserArraysInputs(elementsInput)) {
+      this.currentElements = elementsInput.value.split(/\r?\n/);
+      localStorage.setItem("elements", elementsInput.value);
+    } else {
+      this.currentElements = [...elements];
+      localStorage.setItem("elements", "");
+    }
+
+    if (this.checkUserArraysInputs(improversInput)) {
+      this.currentImprovers = improversInput.value.split(/\r?\n/);
+      localStorage.setItem("improvers", improversInput.value);
+    } else {
+      this.currentImprovers = [...improvers];
+      localStorage.setItem("improvers", "");
+    }
+
+    if (this.checkUserArraysInputs(prefixesInput)) {
+      this.currentPrefixes = prefixesInput.value.split(/\r?\n/);
+      localStorage.setItem("prefixes", prefixesInput.value);
+    } else {
+      this.currentPrefixes = [...prefixes];
+      localStorage.setItem("prefixes", "");
+    }
+
+    if (this.checkUserArraysInputs(suffixesInput)) {
+      this.currentSuffixes = suffixesInput.value.split(/\r?\n/);
+      localStorage.setItem("suffixes", suffixesInput.value);
+    } else {
+      this.currentSuffixes = [...suffixes];
+      localStorage.setItem("suffixes", "");
+    }
+  }
+
+  // If user entered inputs previously, get them back into the text areas
+  addPreviousUserInputs() {
+    const charactersInput = document.querySelector("#charactersTextArea");
+    const objectsInput = document.querySelector("#objectsTextArea");
+    const placesInput = document.querySelector("#placesTextArea");
+    const artistsInput = document.querySelector("#artistsTextArea");
+    const stylesInput = document.querySelector("#stylesTextArea");
+    const colorsInput = document.querySelector("#colorsTextArea");
+    const adjectivesInput = document.querySelector("#adjectivesTextArea");
+    const elementsInput = document.querySelector("#elementsTextArea");
+    const improversInput = document.querySelector("#improversTextArea");
+    const prefixesInput = document.querySelector("#prefixesTextArea");
+    const suffixesInput = document.querySelector("#suffixesTextArea");
+
+    charactersInput.value = localStorage.getItem("characters");
+    objectsInput.value = localStorage.getItem("objects");
+    placesInput.value = localStorage.getItem("places");
+    artistsInput.value = localStorage.getItem("artists");
+    stylesInput.value = localStorage.getItem("styles");
+    colorsInput.value = localStorage.getItem("colors");
+    adjectivesInput.value = localStorage.getItem("adjectives");
+    elementsInput.value = localStorage.getItem("elements");
+    improversInput.value = localStorage.getItem("improvers");
+    prefixesInput.value = localStorage.getItem("prefixes");
+    suffixesInput.value = localStorage.getItem("suffixes");
+  }
+
+  // Reset all user's inputs
+  resetUserInputs() {
+    const charactersInput = document.querySelector("#charactersTextArea");
+    const objectsInput = document.querySelector("#objectsTextArea");
+    const placesInput = document.querySelector("#placesTextArea");
+    const artistsInput = document.querySelector("#artistsTextArea");
+    const stylesInput = document.querySelector("#stylesTextArea");
+    const colorsInput = document.querySelector("#colorsTextArea");
+    const adjectivesInput = document.querySelector("#adjectivesTextArea");
+    const elementsInput = document.querySelector("#elementsTextArea");
+    const improversInput = document.querySelector("#improversTextArea");
+    const prefixesInput = document.querySelector("#prefixesTextArea");
+    const suffixesInput = document.querySelector("#suffixesTextArea");
+
+    localStorage.setItem("characters", "");
+    localStorage.setItem("objects", "");
+    localStorage.setItem("places", "");
+    localStorage.setItem("artists", "");
+    localStorage.setItem("styles", "");
+    localStorage.setItem("colors", "");
+    localStorage.setItem("adjectives", "");
+    localStorage.setItem("elements", "");
+    localStorage.setItem("improvers", "");
+    localStorage.setItem("prefixes", "");
+    localStorage.setItem("suffixes", "");
+
+    charactersInput.value = localStorage.getItem("characters");
+    objectsInput.value = localStorage.getItem("objects");
+    placesInput.value = localStorage.getItem("places");
+    artistsInput.value = localStorage.getItem("artists");
+    stylesInput.value = localStorage.getItem("styles");
+    colorsInput.value = localStorage.getItem("colors");
+    adjectivesInput.value = localStorage.getItem("adjectives");
+    elementsInput.value = localStorage.getItem("elements");
+    improversInput.value = localStorage.getItem("improvers");
+    prefixesInput.value = localStorage.getItem("prefixes");
+    suffixesInput.value = localStorage.getItem("suffixes");
+  }
+}
+
+const promptGenerator = new PromptGenerator();
+
+// Event listener to copy prompts to clipboard
+document.querySelector("#promptsCopyButton").addEventListener("click", (event) => {
+  promptGenerator.copyPromptsToClipboard(promptGenerator.currentPrompts);
+});
+
+// Event listener to generate prompts when pressing generate
+document.querySelector("#generatePromptsButton").addEventListener("click", (event) => {
+  const promptsNumber = document.querySelector("#promptsNumberInput").value;
+  if (!isNaN(promptsNumber) && promptsNumber > 0 && promptsNumber <= 10000) {
+    promptGenerator.generatePrompts(promptsNumber);
+  } else {
+    alert("Please enter a number of prompts to generate between 1 and 10000.");
+  }
+});
+
+// flag to track whether the menu is open or closed
+let isMenuOpen = false;
+
+function mobileMenuClickHandling(event) {
+  // retrieve the hamburger button and the mobile menu
+  const hamburgerButton = document.getElementById("hamburgerButton");
+  const bgMobileMenu = document.getElementById("bgMobileMenu");
+  const menuList = document.getElementById("menuList");
+
+  const isClickOnButton = hamburgerButton.contains(event.target); // check if the clicked element is on the hamburger button
+
+  if (isClickOnButton) {
+    if (isMenuOpen) {
+      menuList.classList.add("hidden"); // hide the menu
+      bgMobileMenu.classList.add("hidden"); // hide the background filter
+      hamburgerButton.blur(); // remove focus from the button
+      document.body.style.overflowY = "visible";
+    } else {
+      menuList.classList.remove("hidden"); // show the menu
+      bgMobileMenu.classList.remove("hidden"); // show the background filter
+      document.body.style.overflowY = "hidden";
+    }
+    isMenuOpen = !isMenuOpen; // invert the flag
+  } else if (menuList.contains(event.target)) {
+    switchGenerator();
+    menuList.classList.add("hidden"); // add the "hidden" class to hide the menu
+    bgMobileMenu.classList.add("hidden"); // hide the background filter
+    isMenuOpen = false; // set the flag to false
+    document.body.style.overflowY = "visible";
+  } else {
+    menuList.classList.add("hidden"); // add the "hidden" class to hide the menu
+    bgMobileMenu.classList.add("hidden"); // hide the background filter
+    isMenuOpen = false; // set the flag to false
+    document.body.style.overflowY = "visible";
+  }
+}
+
+function mobileMenuFocusBack(event) {
+  if (isMenuOpen && !menuList.contains(event.target)) {
+    event.stopImmediatePropagation();
+    hamburgerButton.focus();
+  }
+}
+
+// add an event listener for the click on the hamburger button and anywhere except on the button
+document.addEventListener("click", mobileMenuClickHandling);
+
+// add an event listener for the focusin event
+document.addEventListener("focusin", mobileMenuFocusBack);
+
+// add a function to switch between generators
+function switchGenerator() {
+  const isClickOnPortrait = event.target.classList.contains("portraitLink");
+  const isClickOnLandscapes = event.target.classList.contains("landscapesLink");
+  const isClickOnRandom = event.target.classList.contains("randomLink");
+
+  if (isClickOnPortrait) {
+    promptGenerator.currentGenerator = "portrait";
+  } else if (isClickOnLandscapes) {
+    promptGenerator.currentGenerator = "landscapes";
+  } else if (isClickOnRandom) {
+    promptGenerator.currentGenerator = "random";
+  }
+
+  promptGenerator.showChosenGenerator();
+}
+
+// add an event listener to handle generator switching
+document.querySelector("nav").addEventListener("click", switchGenerator);
+
+// add a function to show generator options
+function showGeneratorOptions() {
+  if (promptGenerator.shownOptions == 0) {
+    promptGenerator.generatorOptionsButton.textContent = promptGenerator.generatorOptionsButton.textContent.replace("Show", "Hide");
+    promptGenerator.shownOptions++;
+  } else {
+    promptGenerator.generatorOptionsButton.textContent = promptGenerator.generatorOptionsButton.innerHTML.replace("Hide", "Show");
+    promptGenerator.shownOptions--;
+  }
+  promptGenerator.inputsDisclaimer.classList.toggle("hidden");
+  promptGenerator.generatorOptionsDiv.classList.toggle("hidden");
+}
+
+// add an event listener to show/hide the generator options
+document.querySelector("#generatorOptionsButton").addEventListener("click", showGeneratorOptions);
+
+// add an event listener to reset generators options
+document.querySelector("#resetInputsButton").addEventListener("click", promptGenerator.resetUserInputs);
+
+// add an event listener to number of artists input that revert to min or max value if user input is out of range
+document.querySelector("#numArtists").addEventListener("change", () => {
+  let numArtists = document.querySelector("#numArtists");
+  let v = Number(numArtists.value);
+  if (v < 1) {
+    numArtists.value = 1;
+  }
+  if (v > 5) {
+    numArtists.value = 5;
+  }
+});
+
+// add an event listener to number of styles & mediums input that revert to min or max value if user input is out of range
+document.querySelector("#numStyles").addEventListener("change", () => {
+  let numStyles = document.querySelector("#numStyles");
+  let v = Number(numStyles.value);
+  if (v < 1) {
+    numStyles.value = 1;
+  }
+  if (v > 3) {
+    numStyles.value = 3;
+  }
+});
+
+// Arrays of randomness
+const characters = [
+  "Mermaid",
+  "Fairy",
+  "Wizard",
+  "Warrior",
+  "Vampire",
+  "Dragon",
+  "Goddess",
+  "Cyborg",
+  "Robot",
+  "Angel",
+  "Demon",
+  "Alien",
+  "Ghost",
+  "Ninja",
+  "Samurai",
+  "Pirate",
+  "Knight",
+  "Bard",
+  "Werewolf",
+  "Zombie",
+  "Giant",
+  "Golem",
+  "Sphinx",
+  "Chimera",
+  "Medusa",
+  "Minotaur",
+  "Harpy",
+  "Kraken",
+  "Cthulhu",
+  "Gorgon",
+  "Hydra",
+  "Banshee",
+  "Satyr",
+  "Cyclops",
+  "Dwarf",
+  "Elf",
+  "Centaur",
+  "Manticore",
+  "Frost Giant",
+  "Sandworm",
+  "Kelpie",
+  "Thunderbird",
+  "Leviathan",
+  "Thundercats",
+  "Gargantua",
+  "Ogre",
+  "Goblin",
+  "Halfling",
+  "Harlequin",
+  "Jinn",
+  "Kitsune",
+  "Lich",
+  "Mummy",
+  "Naga",
+  "Oni",
+  "Pixie",
+  "Siren",
+  "Sylph",
+  "Treant",
+  "Unicorn",
+  "Wendigo",
+  "Wraith",
+  "Xenomorph",
+  "Yokai",
+  "Zephyr",
+  "Zombie Dragon",
+  "Abomination",
+  "Aasimar",
+  "Arachne",
+  "Cambion",
+  "Cerberus",
+  "Changeling",
+  "Djinn",
+  "Dryad",
+  "Gargoyle",
+  "Gnoll",
+  "Grim Reaper",
+  "Half-Demon",
+  "Hobgoblin",
+  "Ifrit",
+  "Incubus",
+  "Kappa",
+  "Lizardfolk",
+  "Mind Flayer",
+  "Mongrelfolk",
+  "Myconid",
+  "Orc",
+  "Sahuagin",
+  "Shapeshifter",
+  "Spectre",
+  "Tengu",
+  "Titan",
+  "Witch",
+  "Yeti",
+  "Yuan-Ti",
+  "Archer",
+  "Barbarian",
+  "Beastmaster",
+  "Cleric",
+  "Druid",
+  "Enchanter",
+  "Executioner",
+  "Gladiator",
+  "Gunslinger",
+  "Healer",
+  "Hunter",
+  "Illusionist",
+  "Infernal",
+  "Inventor",
+  "Jester",
+  "Knight Errant",
+  "Mage Hunter",
+  "Marauder",
+  "Necromancer",
+  "Ninja Assassin",
+  "Paladin",
+  "Psionicist",
+  "Ranger",
+  "Rogue",
+  "Runemaster",
+  "Savage",
+  "Scout",
+  "Shaman",
+  "Sniper",
+  "Soldier",
+  "Sorcerer",
+  "Spellblade",
+  "Spymaster",
+  "Swashbuckler",
+  "Templar",
+  "Thief",
+  "Time Traveler",
+  "Tracker",
+  "Trickster",
+  "Vampire Hunter",
+  "Warlock",
+  "Warrior Monk",
+  "Witch Doctor",
+  "Wizard Hunter",
+  "Zealot",
+  "Arcanist",
+  "Demon Hunter",
+  "Dragon Slayer",
+  "Elementalist",
+  "Basilisk",
+  "Cockatrice",
+  "Cryptid",
+  "Darkling",
+  "Dracolich",
+  "Elemental",
+  "Enchantress",
+  "Fenrir",
+  "Gryphon",
+  "Harpie",
+  "Imp",
+  "Jotun",
+  "Lindworm",
+  "Merfolk",
+  "Nephilim",
+  "Phoenix",
+  "Roc",
+  "Sasquatch",
+  "Spriggan",
+  "Troll",
+  "Ursine",
+  "Valkyrie",
+  "Vargr",
+  "Will-o'-the-wisp",
+  "Wyvern",
+  "Xorn",
+  "Yeth Hound",
+  "Zilant",
+  "Ankheg",
+  "Barghest",
+  "Catoblepas",
+  "Direwolf",
+  "Empusa",
+  "Frost Worm",
+  "Giant Scorpion",
+  "Homunculus",
+  "Illithid",
+  "Juggernaut",
+  "Kobold",
+  "Lamia",
+  "Megafauna",
+  "Nightmare",
+  "Ophidian",
+  "Peryton",
+  "Quetzalcoatlus",
+  "Rat King",
+  "Salamander",
+  "Alchemist",
+  "Fire Elemental",
+  "Water Elemental",
+  "Earth Elemental",
+  "Air Elemental",
+  "Meteor Elemental",
+  "Ice Elemental",
+  "Light Elemental",
+  "Shadow Elemental",
+  "Astral Elemental",
+  "Faun",
+  "Moai",
+  "Wight",
+  "Bogeyman",
+  "Revenant",
+  "Selkie",
+  "Pegasus",
+  "Weretiger",
+  "Werebear",
+  "Seraphim",
+  "Cherubim",
+  "Hobbit",
+  "Skinwalker",
+  "Poltergeist",
+  "Ghoul",
+  "Fomorian",
+  "Vodyanoi",
+  "Kobaloi",
+  "Graeae",
+  "Erinyes",
+  "Hippogriff",
+  "Shade",
+  "Kodama",
+  "Strigoi",
+  "Qilin",
+  "Dullahan",
+  "Headless Horseman",
+  "Aswang",
+  "Stymphalian Birds",
+  "Tengu Warrior",
+  "Koschei",
+  "Nuckelavee",
+  "Hellhound",
+  "Simurgh",
+  "Boogeyman",
+  "Amphisbaena",
+  "Amarok",
+  "Tatzelwurm",
+  "Kaiju",
+  "Sea Serpent",
+  "Raiju",
+  "Wyrm",
+  "Ooze",
+  "Rakshasa",
+  "Balrog",
+  "Grotesque",
+  "Warg",
+  "Quasit",
+  "Skull Knight",
+  "Nephalem",
+  "Archmage",
+  "Astrophysicist",
+  "Geomancer",
+  "Lunar Deity",
+  "Solar Deity",
+  "Diviner",
+  "Cartomancer",
+  "Voodoo Priest",
+  "Spiritualist",
+  "Elemental Lord",
+  "Shadowmancer",
+  "Lunar Sorceress",
+  "Wyrm Rider",
+  "Geomancer",
+  "Electromancer",
+  "Quantum Mage",
+  "Psychonaut",
+  "Cosmonaut",
+  "Seer",
+  "Cosmic Serpent",
+  "Galactic Entity",
+  "Void Entity",
+  "Astral Traveler",
+  "Oracle",
+  "Battle Mage",
+  "Scholar",
+  "High Priest",
+  "Moon Priestess",
+  "Sun Priest",
+  "Seidr",
+  "Feng Shui Master",
+  "Metalbender",
+  "Earthbender",
+  "Firebender",
+  "Waterbender",
+  "Airbender",
+  "Cosmic Bender",
+  "Hexblade",
+  "Shieldbearer",
+  "Lorekeeper",
+  "Peacekeeper",
+  "Oathkeeper",
+  "Master of Whispers",
+  "Master of Arms",
+  "Master of Beasts",
+  "Master of Elements",
+  "Death Knight",
+  "Life Knight",
+  "Chaos Knight",
+  "Order Knight",
+  "Cosmic Knight",
+  "Temporal Knight",
+  "Eldritch Knight",
+  "Keyblade Master",
+  "Astral Knight",
+  "Lunar Knight",
+  "Solar Knight",
+  "Elemental Knight",
+  "Undying",
+  "Celestial",
+  "Sea King",
+  "Sky Queen",
+  "Earth Mother",
+  "Void Master",
+  "Time Warden",
+  "Cosmic Warden",
+  "Lunar Warden",
+  "Sun Warden",
+  "Star Warden",
+  "Shadow Warden",
+  "Spirit Warden",
+  "Ghost Pirate",
+  "Sea Witch",
+  "Lunar Witch",
+  "Solar Witch",
+  "Star Witch",
+  "Wight King",
+  "Oblivion Queen",
+  "Astral Dragon",
+  "Meteor Dragon",
+  "Rainbow Dragon",
+  "Stardust Dragon",
+  "Lunar Phoenix",
+  "Solar Phoenix",
+  "Cosmic Phoenix",
+  "Shadow Phoenix",
+  "Flame Phoenix",
+  "Ocean Phoenix",
+  "Mystic Archer",
+  "Time Archer",
+  "Astral Archer",
+  "Rocket Archer",
+  "Void Archer",
+  "Shadow Archer",
+  "Spectral Archer",
+  "Battle Seer",
+  "Wind Dancer",
+  "Shadow Dancer",
+  "Star Dancer",
+  "Spirit Dancer",
+  "Oath Dancer",
+  "Cosmic Dancer",
+  "Chaos Dancer",
+  "Order Dancer",
+  "Sky Dancer",
+  "Earth Dancer",
+  "Flame Dancer",
+  "Mystic Dancer",
+  "Jungle Shaman",
+  "Desert Shaman",
+  "Mountain Shaman",
+  "Island Shaman",
+  "Sky Shaman",
+  "Battle Shaman",
+  "Shadow Shaman",
+  "Star Shaman",
+  "Chaos Shaman",
+  "Order Shaman",
+  "Master Chief",
+  "Solid Snake",
+  "Kratos",
+  "Geralt of Rivia",
+  "Cloud Strife",
+  "Aloy",
+  "Lara Croft",
+  "Link",
+  "Sonic",
+  "Mario",
+  "Zelda",
+  "Samus Aran",
+  "Sephiroth",
+  "Arthur Morgan",
+  "Niko Bellic",
+  "Marcus Fenix",
+  "Jill Valentine",
+  "Sub-Zero",
+  "Scorpion",
+  "Goku",
+  "Naruto",
+  "Saitama",
+  "Spike Spiegel",
+  "Inuyasha",
+  "Edward Elric",
+  "Astolfo",
+  "Alucard",
+  "Light Yagami",
+  "Asuka Langley",
+  "Totoro",
+  "Kenshin Himura",
+  "Frodo Baggins",
+  "Harry Potter",
+  "Aragorn",
+  "Gandalf",
+  "Jon Snow",
+  "Daenerys Targaryen",
+  "Voldemort",
+  "Lara Croft",
+  "Samus Aran",
+  "Aloy",
+  "Jill Valentine",
+  "Sailor Moon",
+  "Homura Akemi",
+  "Saber",
+  "Mikasa Ackerman",
+  "Asuka Langley Soryu",
+  "Rem",
+  "Nami",
+  "Bulma",
+  "Hermione Granger",
+  "Galadriel",
+  "Éowyn",
+  "Daenerys Targaryen",
+  "Arya Stark",
+  "Leia Organa",
+  "Ripley",
+  "Wonder Woman",
+];
+
+const objects = [
+  "Sword",
+  "Amulet",
+  "Crystal",
+  "Potion",
+  "Book",
+  "Staff",
+  "Wand",
+  "Ring",
+  "Armor",
+  "Helm",
+  "Goblet",
+  "Chalice",
+  "Crown",
+  "Scepter",
+  "Medallion",
+  "Orb",
+  "Talisman",
+  "Relic",
+  "Binoculars",
+  "Spear",
+  "Dagger",
+  "Bow and Arrow",
+  "Shield",
+  "Mace",
+  "Hammer",
+  "Axe",
+  "Crossbow",
+  "Whip",
+  "Bolas",
+  "Poison",
+  "Chainsaw",
+  "Katana",
+  "Glaive",
+  "Shuriken",
+  "Sniper",
+  "Gun",
+  "T-shirt",
+  "Shirt",
+  "Skirt",
+  "Sneakers",
+  "Jeans",
+  "Sunglasses",
+  "Baseball Cap",
+  "Boots",
+  "High Heels",
+  "Excalibur",
+  "Mjölnir",
+  "Lightsaber",
+  "Cape",
+  "Leather Jacket",
+  "Dragonscale Armor",
+  "Refined Armor",
+  "Heavy Armor",
+  "Light Armor",
+  "Laptop",
+  "Smartphone",
+  "Tablet",
+  "Camera",
+  "Chains",
+  "Rope",
+  "Breastplate",
+  "Gauntlets",
+  "Shin Guards",
+  "Cuirass",
+  "Gorget",
+  "Pauldrons",
+  "Vambraces",
+  "Greaves",
+  "Beanie",
+  "Bucket Hat",
+  "Beret",
+  "Cloak",
+  "Sarong",
+  "Kilt",
+  "Chaps",
+  "Quiver",
+  "Holster",
+  "Backpack",
+  "Bracelet",
+  "Choker",
+  "Pendant",
+  "Kimono",
+  "Toga",
+  "Fedora",
+  "Tutu",
+  "Turban",
+  "Fanny Pack",
+  "Combat Boots",
+  "Aviator Glasses",
+];
+
+const places = [
+  "Underwater City",
+  "Sky Castle",
+  "Forest Temple",
+  "Haunted Mansion",
+  "Crystal Cavern",
+  "Ice Fortress",
+  "Volcano Lair",
+  "Cyber City",
+  "Steam Punk Metropolis",
+  "Enchanted Garden",
+  "Dark Dimension",
+  "Celestial Palace",
+  "Underground Tunnels",
+  "Frozen Wasteland",
+  "Desert Oasis",
+  "Jungle Ruins",
+  "Floating Island",
+  "Time Warp",
+  "Alien Planet",
+  "Deep Space Station",
+  "Magical Academy",
+  "Futuristic Laboratory",
+  "Ancient Library",
+  "Artificial Intelligence Network",
+  "Giant's Lair",
+  "Chaos Realm",
+  "Fairy Tale Castle",
+  "Post-Apocalyptic City",
+  "Interdimensional Nexus",
+  "Dreamscape",
+  "Abandoned Asylum",
+  "Sunken Ship",
+  "Forbidden Temple",
+  "Lost City",
+  "Parallel Universe",
+  "Mystic Marsh",
+  "Parallel World",
+  "Underground Kingdom",
+  "Dark Forest",
+  "Crystal Palace",
+  "Cursed Island",
+  "Rainbow Valley",
+  "Fire Mountain",
+  "Hidden Cave",
+  "Sky Kingdom",
+  "Savage Wilds",
+  "Mystical Mountain",
+  "Ancient Pyramid",
+  "Tropical Beach",
+  "Elemental Plane",
+  "Outer Space Colony",
+  "Underground Bunker",
+  "Lunar Base",
+  "Forgotten Citadel",
+  "Ancient Catacombs",
+  "Holographic Theme Park",
+  "Crystal Lake",
+  "Floating Market",
+  "Underground Volcano",
+  "Abandoned Space Station",
+  "Surreal Landscape",
+  "Crystal Tower",
+  "Mystical Island",
+  "Mysterious Labyrinth",
+  "Jungle Canopy",
+  "Enchanted Marketplace",
+  "Sunken Cityscape",
+  "Haunted Forest",
+  "Space Elevator",
+  "Crystal Lagoon",
+  "Magma Chamber",
+  "Thundering Waterfall",
+  "Ethereal Valley",
+  "Abandoned Subway System",
+  "Mirrored City",
+  "Ancient Citadel",
+  "Frozen Tundra",
+  "Haunted Amusement Park",
+  "Sunken Ruins",
+  "Enchanted Castle",
+  "Sandswept Canyon",
+  "Orbital Station",
+  "Lost Wilderness",
+  "Aurora Borealis",
+  "Giant Redwood Forest",
+  "Futuristic Casino",
+  "Mythical Underworld",
+  "Infinite Desert",
+  "Mystical Labyrinth",
+  "Galactic Gateway",
+  "Submerged Cavern",
+  "Eternal Ice Fields",
+  "Dark Matter Realm",
+  "Holographic City",
+  "Celestial Observatory",
+  "Nebula Cluster",
+  "Glacier National Park",
+  "Undiscovered Island",
+  "Underground Laboratory",
+  "Retro Arcade",
+  "Crystal Gardens",
+  "Chromatic Coastline",
+  "Iridescent Reef",
+  "Lunar Colony",
+  "Rainforest Canopy",
+  "Hyperborean Forest",
+  "Tesseract Station",
+  "Magnetic Caves",
+  "Abyssal Trench",
+  "Interstellar Hub",
+  "Exoplanet Outpost",
+  "Emerald Canyon",
+  "Spectral Sands",
+  "Lost Oasis",
+  "Nebula Nebula",
+  "Astral Nexus",
+  "Radiant Cityscape",
+  "Euphoric Eden",
+  "Pixelated Wonderland",
+  "Clockwork Metropolis",
+  "Ethereal Plane",
+  "Neo-Tokyo Megapolis",
+  "Doomsday New York",
+  "Osaka",
+  "Futuristic New York",
+  "Gothic Paris",
+  "Cybernetic London",
+  "Spectral Rome",
+  "Mythical Cairo",
+  "Enchanted Sydney",
+  "Steampunk San Francisco",
+  "Eerie New Orleans",
+  "Epic Berlin",
+  "Venice of Dreams",
+  "Steampunk London",
+  "Retrofuturistic Moscow",
+  "Ruins of Rome",
+  "Shanghai Skybridge",
+  "Cybernetic Arena",
+  "Witch's Cottage",
+  "Infinite Jungle",
+  "Robot Zoo",
+  "Elven Treehouse",
+  "Desert Mirage",
+  "Virtual Reality Playground",
+  "Crystalized Cave",
+  "Dragon's Den",
+  "Sacred Waterfall",
+  "Dimensional Library",
+  "Moonlit Orchard",
+  "Alchemist's Tower",
+  "Haunted Graveyard",
+  "Oceanic Abyss",
+  "Temporal Café",
+  "Lost Atlantis",
+  "Vampire Castle",
+  "Invisible Maze",
+  "Cherry Blossom Temple",
+  "Digital Utopia",
+  "Celestial Zoo",
+  "Pirate Cove",
+  "Forest of Echoes",
+  "Mars Colony",
+  "Alien Zoo",
+  "Petrified Forest",
+  "Goblin Market",
+  "Cursed Zoo",
+  "Eldritch Library",
+  "Heavenly Observatory",
+  "Magic School",
+  "Undying Desert",
+  "Temporal Rift",
+  "Robot Factory",
+  "Spacecraft Graveyard",
+  "Arctic Wilderness",
+  "Lush Savannah",
+  "Carnival of Nightmares",
+  "Starlit Beach",
+];
+
+const elements = [
+  "Fire",
+  "Water",
+  "Air",
+  "Earth",
+  "Lightning",
+  "Ice",
+  "Nature",
+  "Darkness",
+  "Light",
+  "Metal",
+  "Shadow",
+  "Blood",
+  "Lava",
+  "Crystal",
+  "Poison",
+  "Time",
+  "Space",
+  "Gravity",
+  "Sound",
+  "Electricity",
+  "Plasma",
+  "Radiation",
+  "Magma",
+  "Smoke",
+  "Steam",
+  "Void",
+  "Wind",
+  "Plantlife",
+  "Moon",
+  "Sun",
+  "Stars",
+  "Sand",
+  "Ash",
+  "Quicksand",
+  "Frost",
+  "Acid",
+  "Thunder",
+  "Psychic Energy",
+  "Dimensional Rift",
+  "Cosmic Dust",
+  "Spirit",
+  "Gravity Waves",
+  "Invisibility",
+  "Psychokinesis",
+  "Luminosity",
+  "Chaos",
+  "Magnetism",
+  "Antimatter",
+  "Pulse",
+  "Gravity Flux",
+  "Echolocation",
+  "Photosynthesis",
+  "Radiance",
+  "Oblivion",
+  "Memory",
+  "Gravity Well",
+  "Nanobots",
+  "Nuclear Energy",
+  "Psionics",
+  "Phase Shift",
+];
+
+const adjectives = [
+  "Ethereal",
+  "Whimsical",
+  "Mysterious",
+  "Eerie",
+  "Futuristic",
+  "Gothic",
+  "Serene",
+  "Enigmatic",
+  "Otherworldly",
+  "Surreal",
+  "Mythical",
+  "Transcendent",
+  "Celestial",
+  "Nostalgic",
+  "Hypnotic",
+  "Cinematic",
+  "Awe-Inspiring",
+  "Epic",
+  "Radiant",
+  "Ornate",
+  "Holographic",
+  "Prismatic",
+  "Intricate",
+  "Majestic",
+  "Harmonious",
+  "Opulent",
+  "Spectral",
+  "Dramatic",
+  "Glimmering",
+  "Dreamlike",
+  "Hyperrealistic",
+  "Melancholic",
+  "Psychedelic",
+  "Retro-Futuristic",
+  "Post-Apocalyptic",
+  "Neon",
+  "Saturated",
+  "Sculptural",
+  "Minimalist",
+  "Abstract",
+  "Vibrant",
+  "Cosmic",
+  "Organic",
+  "Luminous",
+  "Tranquil",
+  "Whirlwind",
+  "Hazy",
+  "Fragile",
+  "Crisp",
+  "Dynamic",
+  "Galactic",
+  "Flamboyant",
+  "Shimmering",
+  "Misty",
+  "Idyllic",
+  "Nebulous",
+  "Rustic",
+  "Fleeting",
+  "Nimble",
+  "Spirited",
+  "Geometric",
+  "Polygonal",
+  "Golden Hour",
+  "Underwater",
+  "Pokémon",
+];
+
+const styles = [
+  "Digital Art",
+  "Surrealism",
+  "Concept Art",
+  "Illustration",
+  "Character Design",
+  "Anime",
+  "Realism",
+  "Impressionism",
+  "Pop Art",
+  "Steampunk",
+  "Pixel Art",
+  "Graffiti Art",
+  "Fantasy Art",
+  "Futurism",
+  "Art Deco",
+  "Minimalism",
+  "Street Art",
+  "Hyperrealism",
+  "Glitch Art",
+  "Photorealism",
+  "Calligraphy",
+  "Ink",
+  "Woodcut Print",
+  "Manga",
+  "Sketch",
+  "Drawing",
+  "Doodle",
+  "Dot Art",
+  "Stipple",
+  "Anatomical Drawing",
+  "Visual Novel",
+  "Graphic Novel",
+  "Hand-Drawn",
+  "Graphite",
+  "Colored Pencil",
+  "Pastel Art",
+  "Blackboard",
+  "Splatter Paint",
+  "Paper-Marbling",
+  "Logo",
+  "Comic Book",
+  "Poster",
+  "Kirigami",
+  "Origami",
+  "Frame",
+  "Wall Decal",
+  "Banner",
+  "Papercutting",
+  "Ice Carving",
+  "Linocut",
+  "Wood-Carving",
+  "Light Art",
+  "Bokeh",
+  "Wildlife Photography",
+  "Portrait",
+  "Microscopic",
+  "Ultra-Wide Angle",
+  "Depth of Field",
+  "Closeup",
+  "Blur Effect",
+  "Lens Flare",
+  "Punk",
+];
+
+const colors = [
+  "Warm Color Palette",
+  "Colorful",
+  "Rainbow",
+  "Spectral Color",
+  "Inverted Colors",
+  "Neon",
+  "Electric Colors",
+  "Complimentary-Colors",
+  "Dark Mode",
+  "Triadic-Colors",
+  "Polychromatic Colors",
+  "Tones of Black",
+  "Black and White",
+  "Monochrome",
+  "Sepia",
+  "High Contrast",
+  "Low Contrast",
+  "Technicolor",
+  "Atari Graphics",
+  "Adobe RGB",
+  "Hexadecimal",
+  "Vintage",
+  "Pastel Palette",
+  "Metallic Colors",
+  "Fire Tones",
+  "Shades of Gray",
+  "Pop Art Colors",
+  "Night Colors",
+  "Cool Tones",
+  "Warm Tones",
+  "Red Monochrome",
+  "Green Monochrome",
+  "Blue Monochrome",
+  "Yellow Monochrome",
+  "Purple Monochrome",
+];
+
+const artists = [
+  "Alan Lee",
+  "Cyril Rolando",
+  "David Mack",
+  "Donato Giancola",
+  "Greg Rutkowski",
+  "Ismail Inceoglu",
+  "John Berkey",
+  "Michael Garmash",
+  "Peter Mohrbacher",
+  "Sparth",
+  "Vincent Di Fate",
+  "Akihiko Yoshida",
+  "Artgerm",
+  "Charlie Bowater",
+  "Frank Frazetta",
+  "Hsiao-Ron Cheng",
+  "Ilya Kuvshinov",
+  "Joshua Middleton",
+  "Krenz Cushart",
+  "Lois Van Baarle",
+  "Makoto Shinkai",
+  "Rossdraws",
+  "Wenjun Lin",
+  "Anna Dittmann",
+  "Agnes Cecile",
+  "Alphonse Mucha",
+  "Audrey Kawasaki",
+  "Boris Vallejo",
+  "Carne Griffiths",
+  "Conrad Roset",
+  "JC Leyendecker",
+  "Joseph Lorusso",
+  "Jovana Rikalo",
+  "Karol Bak",
+  "Marco Mazzoni",
+  "Miho Hirano",
+  "Rebeca Saray",
+  "Robert McGinnis",
+  "Russ Mills",
+  "Tom Bagshaw",
+  "Tristan Eaton",
+  "Ed Mell",
+  "Jessica Rossier",
+  "Hubert Robert",
+  "Ian McQue",
+  "Marc Simonetti",
+  "Raphael Lacoste",
+  "Bernie Wrightson",
+  "H.R. Giger",
+  "Richard Corben",
+  "Wayne Barlowe",
+  "Zdzislaw Beksinski",
+  "Hokusai Katsushika",
+  "Akira Toriyama",
+  "Eiichiro Oda",
+  "Masashi Kishimoto",
+  "Osamu Tezuka",
+  "Vincent van Gogh",
+  "Leonardo da Vinci",
+  "Frida Kahlo",
+  "Pablo Picasso",
+  "Georgia O'Keeffe",
+  "Ansel Adams",
+  "Dorothea Lange",
+  "Robert Capa",
+  "Cindy Sherman",
+  "Henri Cartier-Bresson",
+  "Michelangelo",
+  "Auguste Rodin",
+  "Louise Bourgeois",
+  "Donatello",
+  "Constantin Brâncuși",
+  "Milton Glaser",
+  "Paul Rand",
+  "Jessica Walsh",
+  "Shepard Fairey",
+  "Mary Blair",
+  "Charles Schulz",
+  "Bill Watterson",
+  "Jack Kirby",
+  "Stan Lee",
+  "R. Crumb",
+  "Banksy",
+  "JR",
+  "Shepard Fairey",
+  "Kobra",
+  "Obey",
+  "Rembrandt van Rijn",
+  "Claude Monet",
+  "Edvard Munch",
+  "Caravaggio",
+  "Johannes Vermeer",
+  "Salvador Dalí",
+  "John Singer Sargent",
+  "Egon Schiele",
+  "Marc Chagall",
+  "Henri Matisse",
+  "Edgar Degas",
+  "Jackson Pollock",
+  "Wassily Kandinsky",
+  "Édouard Manet",
+  "Diego Rivera",
+  "Giotto di Bondone",
+  "Amedeo Modigliani",
+  "Toulouse-Lautrec",
+  "Piet Mondrian",
+  "Francisco Goya",
+  "Hayao Miyazaki",
+  "Genndy Tartakovsky",
+  "Naoko Takeuchi",
+  "Hiromu Arakawa",
+  "Bruce Timm",
+  "Makoto Shinkai",
+  "Rebecca Sugar",
+  "Alex Hirsch",
+  "Pendleton Ward",
+  "Bryan Konietzko and Michael Dante DiMartino",
+  "Junji Ito",
+  "Yoshitaka Amano",
+  "Rumiko Takahashi",
+  "Mamoru Hosoda",
+  "Craig McCracken",
+  "Glen Keane",
+  "Tite Kubo",
+  "Hirohiko Araki",
+  "Nick Park",
+  "Tetsuya Nomura",
+  "Annie Leibovitz",
+  "Steve McCurry",
+  "Yousuf Karsh",
+  "Diane Arbus",
+  "Vivian Maier",
+  "Richard Avedon",
+  "Sebastião Salgado",
+  "Irving Penn",
+  "Robert Frank",
+  "Gordon Parks",
+  "Studio Ghibli",
+  "Madhouse",
+  "Pixar Animation Studios",
+  "Toei Animation",
+  "Rooster Teeth",
+  "Ankama Studio",
+  "Ankama Games",
+];
+
+const prefixes = [
+  "Zombie",
+  "Superhero",
+  "Robot",
+  "Pirate",
+  "Alien",
+  "Wizard",
+  "Vampire",
+  "Werewolf",
+  "Ninja",
+  "Dragon",
+  "Cyborg",
+  "Time-traveler",
+  "Space",
+  "Giant",
+  "Tiny",
+  "Invisible",
+  "Goblin",
+  "Goddess",
+  "Sorceress",
+  "Witch",
+  "Ghost",
+  "Saiyan",
+  "Astral",
+  "Bionic",
+  "Steampunk",
+  "Chrono",
+  "Quantum",
+  "Cybernetic",
+  "Galactic",
+  "Arcane",
+  "Mystic",
+  "Eldritch",
+  "Apocalyptic",
+  "Elemental",
+  "Divine",
+  "Fallen",
+  "Monstrous",
+  "Mutated",
+  "Psionic",
+  "Supernatural",
+  "Feral",
+  "Aquatic",
+  "Subterranean",
+  "Celestial",
+  "Phantasmal",
+  "Revenant",
+  "Living",
+  "Sentient",
+  "Spectral",
+  "Mechanical",
+  "Biological",
+  "Mythic",
+  "Fabled",
+  "Demonic",
+  "Shadow",
+  "Lunar",
+  "Solar",
+  "Stellar",
+  "Arctic",
+  "Tropical",
+  "Imperial",
+  "Royal",
+  "Majestic",
+  "Temporal",
+  "Dimensional",
+  "Vigilante",
+  "Cosmic",
+  "Primordial",
+  "Cursed",
+  "Blessed",
+  "Synthetic",
+  "Aether",
+  "Serpentine",
+  "Nomadic",
+  "Tribal",
+  "High",
+  "Low",
+  "Cunning",
+  "Ruthless",
+  "Infernal",
+  "Heavenly",
+  "Abyssal",
+  "Unholy",
+  "Radiant",
+  "Miraculous",
+  "Noble",
+  "Twisted",
+  "Tormented",
+  "Warped",
+  "Grotesque",
+  "Ascendant",
+  "Dystopian",
+  "Utopian",
+  "Relentless",
+  "Carnal",
+  "Martial",
+  "Aerial",
+  "Aquamarine",
+  "Ivory",
+  "Amber",
+  "Obsidian",
+  "Coral",
+  "Verdant",
+  "Frigid",
+  "Fiery",
+  "Volcanic",
+  "Magnetic",
+  "Elastic",
+  "Immortal",
+  "Mortal",
+  "Digital",
+  "Equestrian",
+  "Feathered",
+  "Scaled",
+  "Translucent",
+  "Ornamental",
+  "Alchemical",
+  "Incorporeal",
+  "Reclusive",
+  "Avian",
+  "Venomous",
+  "Electric",
+];
+
+const suffixes = [
+  "dancing",
+  "flying",
+  "running",
+  "singing",
+  "fighting",
+  "swimming",
+  "climbing",
+  "jumping",
+  "laughing",
+  "crying",
+  "shouting",
+  "exploring",
+  "sleeping",
+  "eating",
+  "walking",
+  "sneaking",
+  "teleporting",
+  "summoning",
+  "twirling",
+  "mystifying",
+  "illuminating",
+  "contemplating",
+  "enchanting",
+  "whispering",
+  "wandering",
+  "daydreaming",
+  "captivating",
+  "vanishing",
+];
+
+const improvers = [
+  "masterpiece, trending on artstation",
+  "trending on deviantart",
+  "award-winning",
+  "masterpiece",
+  "intricate and detailed",
+  "hyper-realistic",
+  "ethereal beauty",
+  "surreal masterpiece",
+  "jaw-dropping",
+  "psychedelic",
+  "colorful and vibrant",
+];
+
+promptGenerator.addPreviousUserInputs();
+
+// generate 10 random prompts
+promptGenerator.generatePrompts(10);