Spaces:

KattyKitty
/

TavernBotmaker

Running

File size: 13,619 Bytes

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

			/* 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 !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(); // 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>