| <!DOCTYPE html> |
| <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; |
| } |
| |
| |
| 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 !important; |
| 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(); |
| 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"); |
| |
| |
| document.getElementById('generatedTemplate').textContent = template; |
| } |
| </script> |
| |
| |
|
|
| </body> |
| </html> |
