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