Spaces:

KattyKitty
/

TavernBotmaker

Running

App Files Files Community

KattyKitty commited on Jan 15, 2024

Commit

f8c4765

verified ·

1 Parent(s): 4bbdde2

Update index.html

Browse files

Files changed (1) hide show

index.html +362 -14

index.html CHANGED Viewed

@@ -1,19 +1,367 @@
 <!DOCTYPE html>
-<html>
 	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
 		</div>
-	</body>
-</html>

 <!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 formatted as: __ feet + __ inches" 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="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 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 (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>