| <!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> |
|
|
