Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Katty's Bot Helper</title> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background-color: #333; | |
| background-image: url('https://files.catbox.moe/qoycoe.png'); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| color: #fff; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: 20px auto; | |
| background-color: #222; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| input { | |
| width: 100%; | |
| padding: 8px; | |
| margin-bottom: 16px; | |
| box-sizing: border-box; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 100px; | |
| padding: 8px; | |
| margin-bottom: 16px; | |
| resize: none; | |
| box-sizing: border-box; | |
| } | |
| select { | |
| width: 100%; | |
| padding: 8px; | |
| margin-bottom: 16px; | |
| box-sizing: border-box; | |
| } | |
| button { | |
| background-color: #4CAF50; | |
| color: #fff; | |
| padding: 10px 15px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background-color: #45a049; | |
| } | |
| /* Dark mode styles */ | |
| body.dark-mode { | |
| background-color: #111; | |
| color: #ddd; | |
| } | |
| .container.dark-mode { | |
| background-color: #111; | |
| box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); | |
| } | |
| #outputBox { | |
| margin-top: 20px; | |
| padding: 10px; | |
| background-color: #444; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| max-width: 600px; | |
| outline: 2px solid #7D12FF; | |
| } | |
| #generatedTemplate { | |
| word-wrap: break-word; | |
| white-space: pre-wrap; | |
| } | |
| #titleSection { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| #titleSection h2 { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 10px; | |
| } | |
| #titleSection img { | |
| width: 40px; | |
| height: 40px; | |
| margin-right: 10px; | |
| border-radius: 50%; | |
| } | |
| #logo a { | |
| color: #FF69B4 ; | |
| text-decoration: none; | |
| } | |
| .macro-button { | |
| background-color: transparent; | |
| color: #4CAF50; | |
| border: none; | |
| cursor: pointer; | |
| outline: none; | |
| font-weight: bold; | |
| } | |
| .macro-button:hover { | |
| text-decoration: underline; | |
| } | |
| .button-area { | |
| text-align: center; | |
| margin: 3px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="titleSection"> | |
| <h2> | |
| <img src="https://files.catbox.moe/wj5mmj.png" alt="Katty's Bot Helper Logo"> | |
| Katty's Bot Helper | |
| </h2> | |
| <a id="logo" href="https://venus.chub.ai/users/KattyyKitty" target="_blank">KattyyKitty's Chub Profile ❤️</a> | |
| </div> | |
| <div style="padding: 5px; text-align: center; position: fixed; right: 0; bottom: 0; background-color: #333;"> | |
| Copy Macros: | |
| <button class="macro-button" onclick="copyToClipboard('{{char}}')">{{char}}</button> | |
| <button class="macro-button" onclick="copyToClipboard('{{user}}')">{{user}}</button> | |
| </div> | |
| <form id="botForm" class="container"> | |
| <label for="charName">Character Name</label> | |
| <input type="text" id="charName" placeholder="Character Name" required> | |
| <label for="nationalityRaceToggle">Nationality/Race Toggle</label> | |
| <select id="nationalityRaceToggle" onchange="toggleField()"> | |
| <option value="nationality">Nationality</option> | |
| <option value="race">Race (Fantasy)</option> | |
| </select> | |
| <label for="nationalityRace">Nationality/Race</label> | |
| <input type="text" id="nationalityRace" placeholder="Self Explanatory" required> | |
| <label for="characterClass">Character Class</label> | |
| <input type="text" id="characterClass" placeholder="Wizard, Warrior, etc." required> | |
| <label for="height">Height</label> | |
| <input type="text" id="height" placeholder="Height" required> | |
| <label for="age">Age</label> | |
| <input type="text" id="age" placeholder="Age" required> | |
| <label for="gender">Gender</label> | |
| <input type="text" id="gender" placeholder="Gender" required> | |
| <label for="appearance">Appearance</label> | |
| <input type="text" id="appearance" placeholder="Appearance formatted as: trait1 + trait2 etc" required> | |
| <div id="outfitSection"> | |
| <label for="outfit">Outfit</label> | |
| <textarea id="outfit" placeholder="Give a general description of your character's outfit (ex. {{char}} generally wears dark clothing and a leather jacket)" required></textarea> | |
| </div> | |
| <div id="genitalsSection"> | |
| <label for="genitals">Genitals Description</label> | |
| <textarea id="genitals" placeholder="Give a detailed description of the character's genitals. Be as descriptive as you'd like." required></textarea> | |
| </div> | |
| <label for="kinks">Kinks/Fetishes</label> | |
| <input type="text" id="kinks" placeholder="formatted as: kink1, kink2, etc" | |
| <label for="likes">Likes</label> | |
| <input type="text" id="likes" placeholder="Likes formatted as: like1, like2, etc" required> | |
| <label for="dislikes">Dislikes</label> | |
| <input type="text" id="dislikes" placeholder="Dislikes formatted as: dislike1, dislike2, etc" required> | |
| <label for="hobbies">Hobbies</label> | |
| <input type="text" id="hobbies" placeholder="List the character's hobbies; i.e. Baseball." | |
| <label for="occupation">Occupation</label> | |
| <input type="text" id="occupation" placeholder="Bot Occupation" required> | |
| <label for="personality1">Personality 1</label> | |
| <textarea id="personality1" placeholder="Personality Traits formatted as: trait1, trait2, etc" required></textarea> | |
| <label for="personality">Personality</label> | |
| <textarea id="personality" placeholder="Here you place all the bot’s personality in detail, be sure to be precise." required></textarea> | |
| <label for="skillsPowersToggle">Skills/Powers Toggle</label> | |
| <select id="skillsPowersToggle" onchange="toggleField()"> | |
| <option value="Skills/Abilities">Skills/Abilities</option> | |
| <option value="Powers/Abilities">Powers/Abilities (Fantasy)</option> | |
| </select> | |
| <label for="skillsPowers">Powers/Abilities</label> | |
| <textarea id="skillsPowers" placeholder="List any powers, skills or abilities your bot has." required></textarea> | |
| <div id="dialogueStyleSection"> | |
| <label for="dialogueStyle">Dialogue Style</label> | |
| <textarea id="dialogueStyle" placeholder="Decribe how your character talks and acts. Example: Slightly raspy voice, sarcastic tone laden with innuendo; speaks her mind without fear of consequence." required></textarea> | |
| </div> | |
| <div id="backgroundSection"> | |
| <label for="background">Background</label> | |
| <textarea id="background" placeholder="Here you place all the important information about the bot, it has to be very descriptive and make sure to use {{char}} when referring to the bot, that way the bot will recognize its own information better." required></textarea> | |
| </div> | |
| <div id="rpSetupSection"> | |
| <label for="rpSetup">RP Setup</label> | |
| <textarea id="rpSetup" placeholder="Here you place the information that you think is necessary for the development during the roleplay."></textarea> | |
| </div> | |
| <div id="motivationSection"> | |
| <label for="motivation">Motivation</label> | |
| <textarea id="motivation" placeholder="Decribe your character's motivations." required></textarea> | |
| </div> | |
| <div id="relationshipsSection"> | |
| <label for="relationships">Relationships</label> | |
| <textarea id="relationships" placeholder="Describe your character's relationship types or specific relationship to {{user}}." required></textarea> | |
| </div> | |
| <label for="miscShit">Misc Stuff</label> | |
| <textarea id="miscShit" placeholder="You can put any misc stuff you want the AI to know in this box." required></textarea> | |
| <button type="button" onclick="generateTemplate()">Generate Template</button> | |
| </form> | |
| <div id="outputBox" class="container"> | |
| <h3>Generated Template:</h3> | |
| <pre id="generatedTemplate"></pre> | |
| <button class="macro-button" onclick="copyGeneratedTemplate()">Copy Template⎘</button> | |
| </div> | |
| <div id="creditSection"> | |
| <p>Background Image: <a href="https://wall.alphacoders.com/big.php?i=1338084" target="_blank">https://wall.alphacoders.com/big.php?i=1338084</a></p> | |
| </div> | |
| <script> | |
| function toggleNationalityRaceField() { | |
| const toggleValue = document.getElementById('nationalityRaceToggle').value; | |
| const label = toggleValue === 'nationality' ? 'Nationality' : 'Race'; | |
| document.getElementById('nationalityRace').placeholder = `${label} - Self Explanatory`; | |
| } | |
| function toggleSkillsPowersField() { | |
| const toggleValue = document.getElementById('skillsPowersToggle').value; | |
| const label = toggleValue === 'Skills/Abilities' ? 'Skills' : 'Powers'; | |
| document.getElementById('skillsPowers').placeholder = `${label} - List any ${label.toLowerCase()}, ${label.toLowerCase()}, etc.`; | |
| } | |
| function toggleCharacterClass() { | |
| const characterClassToggle = document.getElementById('characterClassToggle'); | |
| const characterClass = document.getElementById('characterClass'); | |
| characterClassToggle.checked ? characterClass.removeAttribute('readonly') : characterClass.setAttribute('readonly', 'true'); | |
| } | |
| function copyToClipboard(text) { | |
| const dummy = document.createElement("textarea"); | |
| document.body.appendChild(dummy); | |
| dummy.value = text; | |
| dummy.select(); | |
| document.execCommand("copy"); | |
| document.body.removeChild(dummy); | |
| } | |
| function copyGeneratedTemplate() { | |
| var generatedTemplate = document.getElementById('generatedTemplate'); | |
| var range = document.createRange(); | |
| range.selectNode(generatedTemplate); | |
| window.getSelection().removeAllRanges(); // Clear previous selection | |
| window.getSelection().addRange(range); | |
| try { | |
| document.execCommand('copy'); | |
| window.getSelection().removeAllRanges(); | |
| } catch (err) { | |
| console.error('Unable to copy template: ', err); | |
| } | |
| } | |
| function generateTemplate() { | |
| var charName = document.getElementById('charName').value; | |
| var toggleNationalityRaceValue = document.getElementById('nationalityRaceToggle').value; | |
| var nationalityRace = document.getElementById('nationalityRace').value; | |
| var characterClass = document.getElementById('characterClass').value; | |
| var height = document.getElementById('height').value; | |
| var age = document.getElementById('age').value; | |
| var gender = document.getElementById('gender').value; | |
| var likes = document.getElementById('likes').value; | |
| var dislikes = document.getElementById('dislikes').value; | |
| var appearance = document.getElementById('appearance').value; | |
| var outfit = document.getElementById('outfit').value; | |
| var personality1 = document.getElementById('personality1').value; | |
| var personality = document.getElementById('personality').value; | |
| var occupation = document.getElementById('occupation').value; | |
| var genitals = document.getElementById('genitals').value; | |
| var kinks = document.getElementById('kinks').value; | |
| var background = document.getElementById('background').value; | |
| var rpSetup = document.getElementById('rpSetup').value; | |
| var miscShit = document.getElementById('miscShit').value; | |
| var toggleSkillsPowersValue = document.getElementById('skillsPowersToggle').value; | |
| var skillsPowers = document.getElementById('skillsPowers').value; | |
| var dialogueStyle = document.getElementById('dialogueStyle').value; | |
| var motivation = document.getElementById('motivation').value; | |
| var relationships = document.getElementById('relationships').value | |
| var hobbies = document.getElementById('hobbies').value | |
| var builder = []; | |
| if (charName) builder.push(`name: ${charName}`); | |
| if (nationalityRace) builder.push(`${toggleNationalityRaceValue}: ${nationalityRace}`); | |
| if (characterClass) builder.push(`character class: ${characterClass}`); | |
| if (height) builder.push(`height: ${height}`); | |
| if (age) builder.push(`age: ${age}`); | |
| if (gender) builder.push(`gender: ${gender}`); | |
| if (likes) builder.push(`likes: ${likes}`); | |
| if (dislikes) builder.push(`dislikes: ${dislikes}`); | |
| if (hobbies) builder.push(`hobbies: ${hobbies}`); | |
| if (appearance) builder.push(`appearance: ${appearance}`); | |
| if (outfit) builder.push(`outfit: ${outfit}`); | |
| if (personality1) builder.push(`personality: ${personality1}`); | |
| if (occupation) builder.push(`occupation: ${occupation}`); | |
| if (genitals) builder.push(`genitals: ${genitals}`); | |
| if (kinks) builder.push(`kinks/fetishes: ${kinks}`); | |
| if (dialogueStyle) builder.push(`Dialogue Style: ${dialogueStyle}`); | |
| if (background) builder.push(`Background: ${background}`); | |
| if (personality) builder.push(`Personality: ${personality}`); | |
| if (skillsPowers) builder.push(`${toggleSkillsPowersValue}: ${skillsPowers}`); | |
| if (rpSetup) builder.push(`RP Setup: ${rpSetup}`); | |
| if (motivation) builder.push(`Motivations: ${motivation}`); | |
| if (relationships) builder.push(`Relationships: ${relationships}`); | |
| if (miscShit) builder.push(`${miscShit}`); | |
| var template = builder.join("\n"); | |
| // Display the generated template in the output box | |
| document.getElementById('generatedTemplate').textContent = template; | |
| } | |
| </script> | |
| <!-- This message won't be visible on the page --> | |
| <!-- Feel free to use and change my code but if you distribute it elsewhere please credit me. This took a lot of hard work! --> | |
| </body> | |
| </html> |