|
<!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"> |
|
|
|
<div class="mb-7 lg:mb-10"> |
|
<nav class="flex items-center justify-between px-3 py-1 md:justify-center bg-fublu-800"> |
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
</nav> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
|
|
<div class="px-5 lg:px-20"> |
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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 & 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> |
|
|
|
|
|
<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> |
|
|
|
</div> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
<script src="js/main.js"></script> |
|
</body> |
|
</html> |
|
|
