Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Boazon's Character Generator V1.2
ID	5283713984675840
Created	5 months ago, 1721839550153
Updated	5 months ago, 1721968757166
Code	<!DOCTYPE html> <script> /** Welcome to the Boazon Character Creator! This is still a work in progress, but so far it's got tons of content! Have fun! Credit to @EvanLewis for the launch page */ </script> <html> <head> <meta charset="utf-8"> <title>Boazon's Character Generator V1.2</title> <link href="https://fonts.googleapis.com/css2?family=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&family=Open+Sans:ital,wght@0,300..800;1,300..800" rel="stylesheet"> <link rel='preconnect' href='https://fonts.googleapis.com'> <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lato&family=Material+Icons&display=swap'> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <style> :root { --bg-color: #191919; --text-color: #f0f0f0; } body { background-color: var(--bg-color); margin: 0px; margin-top: -27px; overflow-x: hidden; } #page { background-color: rgb(230, 227, 200); font-family: Roboto; padding: 10px 5px 5px 5px; } #page h1 { color: rgb(79, 55, 33); font-size: 40px; font-family: Libre Baskerville; font-weight: lighter; line-height: 30px; padding-top: 3px; } #page h2 { color: rgb(117, 90, 41); padding-bottom: 11px; border-bottom: 3px solid rgb(214, 164, 79); width: 360px; word-break: break-word; font-size: 35px; line-height: 20px; hyphens: auto; } #page h3 { color: rgb(117, 90, 41); font-family: Neuton; font-size: 30px; line-height: 2px; } #page p { font-size: 18px; width: 360px; word-break: break-word; } #input-page { background-color: var(--bg-color); color: var(--text-color); padding-top: 50px; margin-left: 1px; padding-bottom: 70px; width: 593px; padding-left: 5px; } #input-page h6 { color: gray; font-family: Roboto; width: 480px; margin-top: -15px; font-size: 13px; } #input-page h6:hover { color: rgb(222, 222, 222); } #input-page label { font-family: Roboto; font-weight: bolder; } #input-page textarea { background-color: rgb(97, 97, 97); color: var(--text-color); font-family: Roboto; font-size: 15px; width: 500px; margin-top: 0px; border-top: 30px rgb(48, 48, 48) solid; border-right: 0px rgb(79, 79, 79) solid; border-left: 0px rgb(79, 79, 79) solid; margin-bottom: 15px; } #input-page textarea:focus { outline: none; background-color: rgb(133, 133, 133); color: var(--bg-color); } #input-page #title-input { border-bottom: 5px rgb(77, 76, 77) solid; width: 95%; background-color: rgba(219, 219, 219, 0.6); font-size: 30px; text-shadow: -2px 2px #000000; color: white; font-family: Open Sans; font-weight: bold; } #input-page #title-input:focus { background-color: rgba(219, 219, 219, 0.3); } #input-page input { background-color: transparent; border: none; border-bottom: 1px solid gray; width: 400px; font-size: 15px; color: white; margin-top: 3px; margin-bottom: 3px; } #input-page input:focus { outline: none; } #input-page th { font-family: Open Sans; font-weight: lighter; font-size: 18px; } #input-page table input { width: 150px; padding-bottom: 3px; } #input-page #general-info { height: 250px; width: 450px; margin-bottom: -5px; } #sidebar { background-color: rgb(255, 255, 255, 0.5); border-radius: 7%; width: 180px; position: absolute; right: 0px; top: 95px; padding: 3px; padding-left: 5px; margin-right: 5px; font-size: 19px; } #sidebar strong { font-family: Open Sans; color: rgb(82, 70, 33); } #input-page #finish-button { position: absolute; top: 168px; right:25px; width:82px; height:50px; color:var(--text-color); background-color:rgb(73, 73, 73); border: none; border-radius: 10%; user-select: none; } #finish-button:hover { cursor: pointer; } #input-page textarea { resize: vertical; height: 100px; } #section-nav { background-color: var(--bg-color); width: 100%; z-index: 1; margin-bottom: 15px; border-top: gray solid 1px; border-bottom: gray solid 1px; } #section-nav ul { width: 100%; margin: auto; align-items: center; justify-content: center; } #section-nav ul li { display: inline-block; padding: 10px 15px; color: rgb(217, 217, 217); text-decoration: none; font-family: Roboto; font-weight: bold; } body #section-nav ul li.active { border-bottom: 2.3px solid rgb(255, 207, 64); color: var(--text-color); background-color: rgba(255, 255, 255, 0.2); } #section-nav ul li:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.1); border-bottom: 2.3px solid rgba(255, 255, 255, 0.1); } .input-pages { display: none; } #error-page { padding: 30px; background-color: black; padding-bottom: 454px; } footer { position: fixed; background-color: rgb(66, 66, 66); height: 45px; bottom: 0px; font-family: Open Sans; width: 100%; padding-left: 5px; color: var(--text-color); margin-left: -5px; } .close-mark { margin-right: 10px; background-color: salmon; color: var(--text-color); font: bold 13px Roboto; position: absolute; right: 0px; bottom: 15px; user-select: none; padding: 2px 7px; margin-top: 3px; } .close-mark:hover { cursor: pointer; } #page #char-name { width: 400px; line-height: 20px; } #go-back-button { position: absolute; top: 30px; left:450px; width:82px; height:50px; color:var(--text-color); background-color:rgb(58, 23, 117); border: none; border-radius: 10%; user-select: none; font-size: 15px; font-family: Open Sans; font-weight: bolder; } #go-back-button:hover { cursor: pointer; } </style> <!-- ~280 lines of styling --> <style> @keyframes fade { 0% { opacity: 1; } 98% { opacity: 0.01; } 100% { opacity: 0; } } #launch { padding-top: 85px; text-align: center; color: white; background-color: var(--bg-color); width: 100%; height: 600px; display: block; position: absolute; z-index: 100; } #launch-container { height: 51%; width: 85%; margin: auto; position: absolute; top: 27%; left: 7.5%; } #launch h1 { font-family: 'Lato'; position: absolute; font-size: 39px; width: 100%; top: 9%; left: 0%; } #launch .info { display: block; font-family: 'Lato'; font-size: 27px; height: 48%; top: 26%; left: 8%; background-color: #0e0d5c; border-radius: 5px; padding: 42px 11px; } #launch .info p { display: block; margin-top: 2.5%; } #launch .info span { color: lightblue; text-decoration: underline; } #launch a { color: var(--text-color); font-family: 'Lato'; font-size: 22px; display: block; background-color: #0a0a29; padding: 12px 214px; border-radius: 5px; margin-top: 10.5%; } #launch a:hover { cursor: pointer; } </style> <!-- Launch page--> </head> <body> <article id="page" style="height:300px"> <h1 id="title">Title</h1> <h3 id="char-name"></h3> <p id="article-info"></p> <section id="mental-section"> <h2>Mental Characteristics</h2> <span id="history-article"> <h3>Personal History</h3> <p>None Yet.</p> </span> <span id="education-article"> <h3>Education</h3> <p>He dumb</p> </span> <span id="employment-article"> <h3>Employment</h3> <p>Scammer</p> </span> <span id="achievement-article"> <h3>Accomplishments</h3> <p>He killed his rivals</p> </span> <span id="failure-article"> <h3>Failures</h3> <p>He ded now</p> </span> <span id="trauma-article"> <h3>Mental Trauma</h3> <p>He was in the war</p> </span> <span id="philosophy-article"> <h3>Morality and Philosophy</h3> <p>Do your taxes</p> </span> <span id="taboo-article"> <h3>Taboos</h3> <p></p> </span> </section> <!-- Mental Section --> <section id="personal-section"> <h2 style="font-size:32px">Personal Characteristics</h2> <span id="motivation-article"> <h3>Motivation</h3> <p></p> </span> <span id="likes-article"> <h3>Likes and dislikes</h3> <p></p> </span> <span id="perks-article"> <h3>Virtues and Perks</h3> <p></p> </span> <span id="vices-article"> <h3>Vices and flaws</h3> <p></p> </span> </section> <!-- Personal Section --> <section id="physical-section"> <h2 style="font-size: 32px">Physical Characteristics</h2> <span id="phys-cond-article"> <h3>Physical Condition</h3> <p></p> </span> <span id="body-article"> <h3>Body Features</h3> <p></p> </span> <span id="face-article"> <h3>Facial Features</h3> <p>MOOSTASH</p> </span> <span id="id-article"> <h3>Identifable Features</h3> <p>Black Birthmark</p> </span> <span id="ability-article"> <h3>Special Abilities</h3> <p>Leap of Faith</p> </span> <span id="items-article"> <h3>Accessories and Equipment</h3> <p>Black Birthmark</p> </span> </section> <!-- Physical Section --> <div id="sidebar"> <section> <span id="eyes-article"> <strong>Eyes</strong><br> <span>None</span><br> </span> <span id="age-article"> <strong>Age</strong><br> <span>0</span><br> </span> <span id="pronouns-article"> <strong>Pronouns</strong><br> <span>They/them</span><br> </span> <span id="skin-article"> <strong>Skin/Fur</strong><br> <span>Skinny</span><br> </span> <span id="hair-article"> <strong>Hair</strong><br> <span></span><br> </span> <span id="species-article"> <strong>Species</strong><br> <span></span><br> </span> <span id="gender-article"> <strong>Gender</strong><br> <span></span><br> </span> <span id="weight-article"> <strong>Weight</strong><br> <span>50 lbs.</span><br> </span> <span id="height-article"> <strong>Height</strong><br> <span>5 ft. 4</span><br> </span> <span id="deity-article"> <strong>Religious Belief</strong><br> <span>Quezalcotal</span><br> </span> <span id="main-org-article"> <strong>Main Organization</strong><br> <span>Charlie Co.</span><br> </span> <span id="status-article"> <strong>Current Status</strong><br> <span>Deceased</span><br> </span> <span id="orgs-article"> <strong>Affilated Organizations</strong><br> <span>Charlie Co. Branches</span><br> </span> <span id="location-article"> <strong>Current Location</strong><br> <span>The Grave</span><br> </span> <span id="condition-article"> <strong>Conditions and Sicknesses</strong><br> <span>Blargh</span><br> </span> <span id="residence-article"> <strong>Residence</strong><br> <span>Grave</span><br> </span> <span id="alignment-article"> <strong>Alignment</strong><br> <span>Chaotic Neutral</span><br> </span> </section><!-- Generic Info--> <span id="language-article"> <strong>Known Languages</strong><br> <span>English, French</span><br> </span> <span id="quotes-article"> <strong>Famous Quotes/<br>Catchphrases</strong><br> <span>Yeehaw, baby!</span><br> </span> </div> <!-- Sidebar --> <input type="button" id="go-back-button" value="Re-edit"> </article> <!-- Article --> <form id="input-page"> <label id="top-label">Article Title <em>(Note: This should be your character first name)</em></label> <input id="title-input"> <br> <label>General info</label><br> <textarea id="general-info" cols="100"></textarea><br><br><br> <nav id="section-nav"><ul> <li>Generic</li><li>Naming</li><li>Mental</li><li>Personal</li><li id="new-thing">Physical</li><li>Social</li> </ul></nav> <div class="input-pages"> <table> <thead> <tr> <th>Presentation</th> <th>Origins</th> </tr> </thead> <tbody> <tr> <td><label>Eyes</label></td> <td><label>Age</label></td> </tr> <tr> <td><input placeholder="E.G. Color, openess" id="eyes-input"></td> <td><input type="number" id="age-input"></td> </tr> <tr> <td><label>Skin/feathers/fur</label></td> <td><label>Pronouns</label></td> </tr> <tr> <td><input id="skin-input"></td> <td><input id="pronouns-input"></td> </tr> <tr> <td><label>Hair</label></td> <td><label>Species</label></td> </tr> <tr> <td><input id="hair-input"></td> <td><input id="species-input"></td> </tr> <tr> <td><label>Height</label></td> <td></td> </tr> <tr> <td><input id="height-input"></td> <td></td> </tr> <tr> <td><label>Weight</label></td> <td></td> </tr> <tr> <td><input id="weight-input"></td> <td></td> </tr> <tr> <td><label>Gender</label></td> <td><label></label></td> </tr> <tr> <td><input id="gender-input"></td> <td></td> </tr> </tbody><!-- Presentation/Origins--> <thead> <tr> <th>Current State</th> <th style="display:none;">E</th> </tr> </thead> <tbody> <tr> <td><label>Religious Belief/Diety</label></td> <td><label>Main Affilated<br> Organization</label></td> </tr> <tr> <td><input id="deity-input"></td> <td><input id="main-org-input"></td> </tr> <tr> <td><label>Current Status</label></td> <td><label>Other Affilated<br>Organizations</label></td> </tr> <tr> <td><input id="status-input"></td> <td><input id="orgs-input"></td> </tr> <tr> <td><label>Current Location</label></td> <td><label>Conditions and<br>sicknesses</label></td> </tr> <tr> <td><input id="location-input"></td> <td><input id="condition-input"></td> </tr> <tr> <td><label>Current Residence</label></td> <td><label>Alignment</label></td> </tr> <tr> <td><input id="residence-input"></td> <td><input id="alignment-input"></td> </tr> </tbody> <!-- Current state--> </table> </div> <!-- Generic --> <div class="input-pages"> <label>Honorific/title<br></label> <input id="char-titles"><br> <label>Given name<br></label> <input id="char-name-input"><br> <label>Middle name<br></label> <input id="char-middle-name"><br> <label>Last name<br></label> <input id="char-last-name"><br> </div> <!-- Naming --> <div class="input-pages" id="mental-input-page"> <label>Personal History</label> <textarea id="history-input"></textarea> <br><label>Education</label><br> <textarea id="education-input"></textarea> <label>Employment</label> <textarea id="employment-input"></textarea> <h6>What's the work history of your character, which stages their career went through to be where they are today?</h6> <label>Accomplishments and Achievements</label> <textarea id="achievement-input"></textarea><br> <h6>The accomplishments and our failures shape who we are. Use these sections to describe this character's life shaping events and their resolutions</h6> <label>Failures and Embarressments</label> <textarea id="failure-input"></textarea><br> <label id="trauma-label">Mental Trauma</label> <textarea id="trauma-input"></textarea><br> <label>Philosophy and Morality</label> <textarea id="philosophy-input"></textarea><br> <label>Taboos</label><br> <textarea id="taboo-input"></textarea><br> <label>Known Languages</label><br> <input id="language-input"> </div> <!-- Mental --> <script for="mental-input-page"> var chance = Math.random(); var lbl = document.getElementById("trauma-label") if (chance < 0.003) { lbl.style.color = "gold"; lbl.innerHTML += " >:D<br>Congrats bro/gal you got a shiny label (Tell Boazon you got a shiny label)" } </script><!-- The hidden script --> <div class="input-pages"> <label>Motivation</label><br> <textarea id="motivation-input"></textarea><br> <h6>Desires and priorities that drive this character.</h6> <label>Famous Quotes and catchphrases</label> <input id="quotes-input"><br> <br> <label>Likes and Dislikes</label> <textarea id="likes-input"></textarea> <br> <label>Virtues and Perks</label> <textarea id="perks-input"></textarea><h6>Strengths, positive character aspects etc.</h6> <label>Vices and Flaws</label><br> <textarea id="vices-input"></textarea><h6>Addictions, secret beliefs etc.</h6> </div> <!-- Personal --> <div class="input-pages"> <label>Physical Condition</label> <textarea id="phys-cond-input"></textarea> <h6>Use this as a way to quickly describe your character in less than 3 sentences. Fitness, Agility, Body shape, Aids, Abnormalities, Illnesses, Afflictions.</h6> <label>Body Features</label> <textarea id="body-input"></textarea> <h6>Skin tone, fur, hair etc.</h6> <label>Facial Features</label> <textarea id="face-input"></textarea> <h6>Facial features, shape, structure, facial hair etc.</h6> <label>Identifying Features</label> <textarea id="id-input"></textarea> <h6>Birthmark, Piercing, Tattoos etc.</h6> <label>Accessories and Specialized Equipment</label> <textarea id="items-input"></textarea> <h6>Style, Fabric, Color, Condition.<br>Also Equipment, Weapons, Armour, Gadgets.</h6> <label>Special Abilities</label> <textarea id="ability-input"></textarea> <h6>Magic Abilites, Mutations, Psionics, Superpowers and all that jazz</h6> </div> <!-- Physical --> <div class="input-pages"> This page also isn't implemented yet. Still sorry guys! </div> <!-- Social (Incomplete) --> <input id="finish-button" type="button" value="I'm done!"> <footer></footer> <span style="position:absolute;top:420px;left:380px;color:salmon;font-size:15px;font-family:Lato;" id="new-prompt">Brand new to 1.2!</span> </form> <!-- Input page --> <div id="error-page"> <h1 style="color:white"id="error-msg">Error: in </h1><h3 style="color:white">If you see this message, please inform Boazon because it isn't supposed to happen.</h3> </div> <!-- Error page--> <div id="launch"> <h1 id="launch-heading">The Boazon Character Creator<br>Version 1.2</h1> <div id="launch-container"> <div class="info"> <p>Welcome to the Boazon Character Creator. This Creator is still in progress but already has more than a thousand lines of code and tons of content!<br><span>Changelog below.</span> </p> </div> <a id="start-button">Explore</a><br><br> <div class="info" style="height:350px;">Changelog for v1.2<br> <ul> <li>Updated the tips system - now it actually works</li> <li>Fixed bugs involving the Religious Belief and Hair inputs</li> <li>Added Changelog</li> <li>Fixed a bug where the sidebar wouldn't show up</li> <li>Added a brand new section with inputs</li> </ul> </div> </div> </div> <!-- Launch page --> <!-- Misc scripts--> <script> document.getElementById("error-page").style.display = "none"; document.querySelector("#page").style.display = "none"; document.querySelector("#input-page").style.display = "none"; //document.querySelector("#launch").style.display = "none"; function Errormsg(msg) { document.getElementById("page").style.display = "none"; document.getElementById("input-page").style.display = "none"; document.getElementById("error-page").style.display = "block"; document.getElementById("error-msg").textContent += msg; } document.querySelectorAll("input").forEach(function(inp) { inp.addEventListener("input", function() { }); }); document.getElementById("new-thing").addEventListener ("click", function() {document.getElementById("new-prompt").style.display = "none";}); </script> <!-- Table styling script --> <script> var tableInputs = document.querySelectorAll("td"); for (var i = 1;i < tableInputs.length;i += 2) { tableInputs[i].style.position = "relative"; tableInputs[i].style.right = -100 + "px"; } var tableHeads = document.querySelectorAll("th"); for (var i = 1;i < tableHeads.length;i += 2) { tableHeads[i].style.position = "relative"; tableHeads[i].style.right = -100 + "px" } </script> <!-- Hot tip script --> <script> var tips = [ "There's a small chance two specific words somewhere will become<br>golden and look cool", "A normal article requires having a title and general info.", "This still isn't done! Soon it'll get some updates", "Click the x button to close this popup", "This program has more than a thousand lines! Amazing, no?", "<small><small><small><small>Credits to worldanvil for the idea</small></small></small></small>"]; var tip = document.querySelectorAll("footer")[0]; tip.textContent += "Tip: " var chosenTip = Math.floor(Math.random()tips.length); tip.innerHTML += tips[chosenTip] var close_button = document.createElement("span"); close_button.className += "close-mark"; close_button.textContent += "x"; tip.append(close_button) close_button.addEventListener("click", function() {tip.style.display = "none";}); //tip.style.display = "none"; </script> <!-- Article updating script --> <script> /** Info and Title / document.querySelector("#title-input").addEventListener("input", function() { var art_title = document.querySelector("#title-input").value; var new_title = art_title[0].toUpperCase(); for (var i = 1;i < art_title.length;i ++) { new_title += art_title[i]; } document.querySelector("#title").innerHTML = new_title; }); document.querySelector("#general-info").addEventListener("input", function() {document.querySelector("#article-info").innerHTML = document.querySelector("#general-info").value;}); //{ /* Eyes */ document.querySelector("#eyes-input").addEventListener('input', function() { if (document.querySelector("#eyes-input").value !== '') { document.querySelector("#eyes-article").style.display = 'block'; document.querySelector("#eyes-article span").textContent = document.querySelector("#eyes-input").value; } else { document.querySelector("#eyes-article").style.display = "none"; } }); document.querySelector("#eyes-article").style.display = "none"; /* Age */ document.querySelector("#age-input").addEventListener('input', function() { if (document.querySelector("#age-input").value !== '') { document.querySelector("#age-article").style.display = 'block'; document.querySelector("#age-article span").textContent = document.querySelector("#age-input").value; } else { document.querySelector("#age-article").style.display = "none"; } }); document.querySelector("#age-article").style.display = "none"; /* Skin/feathers/fur */ document.querySelector("#skin-input").addEventListener('input', function() { if (document.querySelector("#skin-input").value !== '') { document.querySelector("#skin-article").style.display = 'block'; document.querySelector("#skin-article span").textContent = document.querySelector("#skin-input").value; } else { document.querySelector("#skin-article").style.display = "none"; } }); document.querySelector("#skin-article").style.display = "none"; /* Pronouns */ document.querySelector("#pronouns-input").addEventListener('input', function() { if (document.querySelector("#pronouns-input").value !== '') { document.querySelector("#pronouns-article").style.display = 'block'; document.querySelector("#pronouns-article span").textContent = document.querySelector("#pronouns-input").value; } else { document.querySelector("#pronouns-article").style.display = "none"; } }); document.querySelector("#pronouns-article").style.display = "none"; /* Hair */ document.querySelector("#hair-input").addEventListener('input', function() { if (document.querySelector("#hair-input").value !== '') { document.querySelector("#hair-article").style.display = 'block'; document.querySelector("#hair-article span").textContent = document.querySelector("#hair-input").value; } else { document.querySelector("#hair-article").style.display = "none"; } }); document.querySelector("#hair-article").style.display = "none"; /* Height & Weight*/ document.querySelector("#height-input").addEventListener('input', function() { if (document.querySelector("#height-input").value !== '') { document.querySelector("#height-article").style.display = 'block'; document.querySelector("#height-article span").textContent = document.querySelector("#height-input").value; } else { document.querySelector("#height-article").style.display = "none"; } }); document.querySelector("#height-article").style.display = "none"; document.querySelector("#weight-input").addEventListener('input', function() { if (document.querySelector("#weight-input").value !== '') { document.querySelector("#weight-article").style.display = 'block'; document.querySelector("#weight-article span").textContent = document.querySelector("#weight-input").value; } else { document.querySelector("#weight-article").style.display = "none"; } }); document.querySelector("#weight-article").style.display = "none"; /* Species */ document.querySelector("#species-input").addEventListener('input', function() { if (document.querySelector("#species-input").value !== '') { document.querySelector("#species-article").style.display = 'block'; document.querySelector("#species-article span").textContent = document.querySelector("#species-input").value; } else { document.querySelector("#species-article").style.display = "none"; } }); document.querySelector("#species-article").style.display = "none"; /* Gender */ document.querySelector("#gender-input").addEventListener('input', function() { if (document.querySelector("#gender-input").value !== '') { document.querySelector("#gender-article").style.display = 'block'; document.querySelector("#gender-article span").textContent = document.querySelector("#gender-input").value; } else { document.querySelector("#gender-article").style.display = "none"; } }); document.querySelector("#gender-article").style.display = "none"; /* Religious Belief */ document.querySelector("#deity-input").addEventListener('input', function() { if (document.querySelector("#deity-input").value !== '') { document.querySelector("#deity-article").style.display = 'block'; document.querySelector("#deity-article span").textContent = document.querySelector("#deity-input").value; } else { document.querySelector("#deity-article").style.display = "none"; } }); document.querySelector("#deity-article").style.display = "none"; /* Main Affilated Organization */ document.querySelector("#main-org-input").addEventListener('input', function() { if (document.querySelector("#main-org-input").value !== '') { document.querySelector("#main-org-article").style.display = 'block'; document.querySelector("#main-org-article span").textContent = document.querySelector("#main-org-input").value; } else { document.querySelector("#main-org-article").style.display = "none"; } }); document.querySelector("#main-org-article").style.display = "none"; /* Status */ document.querySelector("#status-input").addEventListener('input', function() { if (document.querySelector("#status-input").value !== '') { document.querySelector("#status-article").style.display = 'block'; document.querySelector("#status-article span").textContent = document.querySelector("#status-input").value; } else { document.querySelector("#status-article").style.display = "none"; } }); document.querySelector("#status-article").style.display = "none"; /* Other Affilated Organizations*/ document.querySelector("#orgs-input").addEventListener('input', function() { if (document.querySelector("#orgs-input").value !== '') { document.querySelector("#orgs-article").style.display = 'block'; document.querySelector("#orgs-article span").textContent = document.querySelector("#orgs-input").value; } else { document.querySelector("#orgs-article").style.display = "none"; } }); document.querySelector("#orgs-article").style.display = "none"; /* Current Location */ document.querySelector("#location-input").addEventListener('input', function() { if (document.querySelector("#location-input").value !== '') { document.querySelector("#location-article").style.display = 'block'; document.querySelector("#location-article span").textContent = document.querySelector("#location-input").value; } else { document.querySelector("#location-article").style.display = "none"; } }); document.querySelector("#location-article").style.display = "none"; /* Current Location */ document.querySelector("#condition-input").addEventListener('input', function() { if (document.querySelector("#condition-input").value !== '') { document.querySelector("#condition-article").style.display = 'block'; document.querySelector("#condition-article span").textContent = document.querySelector("#condition-input").value; } else { document.querySelector("#condition-article").style.display = "none"; } }); document.querySelector("#condition-article").style.display = "none"; /* Current Residence */ document.querySelector("#residence-input").addEventListener('input', function() { if (document.querySelector("#residence-input").value !== '') { document.querySelector("#residence-article").style.display = 'block'; document.querySelector("#residence-article span").textContent = document.querySelector("#residence-input").value; } else { document.querySelector("#residence-article").style.display = "none"; } }); document.querySelector("#residence-article").style.display = "none"; /* Current Alignment */ document.querySelector("#alignment-input").addEventListener('input', function() { if (document.querySelector("#alignment-input").value !== '') { document.querySelector("#alignment-article").style.display = 'block'; document.querySelector("#alignment-article span").textContent = document.querySelector("#alignment-input").value; } else { document.querySelector("#alignment-article").style.display = "none"; } }); document.querySelector("#alignment-article").style.display = "none"; //} Generic info. ~190 lines //{ /* Personal history */ document.querySelector("#history-input").addEventListener('input', function() { if (document.querySelector("#history-input").value !== '') { document.querySelector("#history-article").style.display = 'block'; document.querySelector("#history-article p").textContent = document.querySelector("#history-input").value; } else { document.querySelector("#history-article").style.display = "none"; } }); document.querySelector("#history-article").style.display = "none"; /* Education */ document.querySelector("#education-input").addEventListener('input', function() { if (document.querySelector("#education-input").value !== '') { document.querySelector("#education-article").style.display = 'block'; document.querySelector("#education-article p").textContent = document.querySelector("#education-input").value; } else { document.querySelector("#education-article").style.display = "none"; } }); document.querySelector("#education-article").style.display = "none"; /* Employment */ document.querySelector("#employment-input").addEventListener('input', function() { if (document.querySelector("#employment-input").value !== '') { document.querySelector("#employment-article").style.display = 'block'; document.querySelector("#employment-article p").textContent = document.querySelector("#employment-input").value; } else { document.querySelector("#employment-article").style.display = "none"; } }); document.querySelector("#employment-article").style.display = "none"; /* Accomplishments and Achievements */ document.querySelector("#achievement-input").addEventListener('input', function() { if (document.querySelector("#achievement-input").value !== '') { document.querySelector("#achievement-article").style.display = 'block'; document.querySelector("#achievement-article p").textContent = document.querySelector("#achievement-input").value; } else { document.querySelector("#achievement-article").style.display = "none"; } }); document.querySelector("#achievement-article").style.display = "none"; /* Failures and Embarressments */ document.querySelector("#failure-input").addEventListener('input', function() { if (document.querySelector("#failure-input").value !== '') { document.querySelector("#failure-article").style.display = 'block'; document.querySelector("#failure-article p").textContent = document.querySelector("#failure-input").value; } else { document.querySelector("#failure-article").style.display = "none"; } }); document.querySelector("#failure-article").style.display = "none"; /* Mental trauma */ document.querySelector("#trauma-input").addEventListener('input', function() { if (document.querySelector("#trauma-input").value !== '') { document.querySelector("#trauma-article").style.display = 'block'; document.querySelector("#trauma-article p").textContent = document.querySelector("#trauma-input").value; } else { document.querySelector("#trauma-article").style.display = "none"; } }); document.querySelector("#trauma-article").style.display = "none"; /* Morality and Philosophy */ document.querySelector("#philosophy-input").addEventListener('input', function() { if (document.querySelector("#philosophy-input").value !== '') { document.querySelector("#philosophy-article").style.display = 'block'; document.querySelector("#philosophy-article p").textContent = document.querySelector("#philosophy-input").value; } else { document.querySelector("#philosophy-article").style.display = "none"; } }); document.querySelector("#philosophy-article").style.display = "none"; /* Taboos */ document.querySelector("#taboo-input").addEventListener('input', function() { if (document.querySelector("#taboo-input").value !== '') { document.querySelector("#taboo-article").style.display = 'block'; document.querySelector("#taboo-article p").textContent = document.querySelector("#taboo-input").value; } else { document.querySelector("#taboo-article").style.display = "none"; } }); document.querySelector("#taboo-article").style.display = "none"; /* Known Languages */ document.querySelector("#language-input").addEventListener('input', function() { if (document.querySelector("#language-input").value !== '') { document.querySelector("#language-article").style.display = 'block'; document.querySelector("#language-article span").textContent = document.querySelector("#language-input").value; } else { document.querySelector("#language-article").style.display = "none"; } }); document.querySelector("#language-article").style.display = "none"; //} Mental Characteristics ~100 lines //{ /* Motivation */ document.querySelector("#motivation-input").addEventListener('input', function() { if (document.querySelector("#motivation-input").value !== '') { document.querySelector("#motivation-article").style.display = 'block'; document.querySelector("#motivation-article p").textContent = document.querySelector("#motivation-input").value; } else { document.querySelector("#motivation-article").style.display = "none"; } }); document.querySelector("#motivation-article").style.display = "none"; /* Famous Quotes/Catchphrases*/ document.querySelector("#quotes-input").addEventListener('input', function() { if (document.querySelector("#quotes-input").value !== '') { document.querySelector("#quotes-article").style.display = 'block'; document.querySelector("#quotes-article span").textContent = document.querySelector("#quotes-input").value; } else { document.querySelector("#quotes-article").style.display = "none"; } }); document.querySelector("#quotes-article").style.display = "none"; /* Motivation */ document.querySelector("#likes-input").addEventListener('input', function() { if (document.querySelector("#likes-input").value !== '') { document.querySelector("#likes-article").style.display = 'block'; document.querySelector("#likes-article p").textContent = document.querySelector("#likes-input").value; } else { document.querySelector("#likes-article").style.display = "none"; } }); document.querySelector("#likes-article").style.display = "none"; /* Virtues and Perks */ document.querySelector("#perks-input").addEventListener('input', function() { if (document.querySelector("#perks-input").value !== '') { document.querySelector("#perks-article").style.display = 'block'; document.querySelector("#perks-article p").textContent = document.querySelector("#perks-input").value; } else { document.querySelector("#perks-article").style.display = "none"; } }); document.querySelector("#perks-article").style.display = "none"; /* Virtues and Perks */ document.querySelector("#vices-input").addEventListener('input', function() { if (document.querySelector("#vices-input").value !== '') { document.querySelector("#vices-article").style.display = 'block'; document.querySelector("#vices-article p").textContent = document.querySelector("#vices-input").value; } else { document.querySelector("#vices-article").style.display = "none"; } }); document.querySelector("#vices-article").style.display = "none"; //} Personal Characteristics ~60 lines //{ /* Phys. Condition */ document.querySelector("#phys-cond-input").addEventListener('input', function() { if (document.querySelector("#phys-cond-input").value !== '') { document.querySelector("#phys-cond-article").style.display = 'block'; document.querySelector("#phys-cond-article p").textContent = document.querySelector("#phys-cond-input").value; } else { document.querySelector("#phys-cond-article").style.display = "none"; } }); document.querySelector("#phys-cond-article").style.display = "none"; /* Body Features */ document.querySelector("#body-input").addEventListener('input', function() { if (document.querySelector("#body-input").value !== '') { document.querySelector("#body-article").style.display = 'block'; document.querySelector("#body-article p").textContent = document.querySelector("#body-input").value; } else { document.querySelector("#body-article").style.display = "none"; } }); document.querySelector("#body-article").style.display = "none"; /* Face Features*/ document.querySelector("#face-input").addEventListener('input', function() { if (document.querySelector("#face-input").value !== '') { document.querySelector("#face-article").style.display = 'block'; document.querySelector("#face-article p").textContent = document.querySelector("#face-input").value; } else { document.querySelector("#face-article").style.display = "none"; } }); document.querySelector("#face-article").style.display = "none"; /* I'm tired of making these headings */ document.querySelector("#id-input").addEventListener('input', function() { if (document.querySelector("#id-input").value !== '') { document.querySelector("#id-article").style.display = 'block'; document.querySelector("#id-article p").textContent = document.querySelector("#id-input").value; } else { document.querySelector("#id-article").style.display = "none"; } }); document.querySelector("#id-article").style.display = "none"; /* Equipment */ document.querySelector("#items-input").addEventListener('input', function() { if (document.querySelector("#items-input").value !== '') { document.querySelector("#items-article").style.display = 'block'; document.querySelector("#items-article p").textContent = document.querySelector("#items-input").value; } else { document.querySelector("#items-article").style.display = "none"; } }); document.querySelector("#items-article").style.display = "none"; /* Special Abilites **/ document.querySelector("#ability-input").addEventListener('input', function() { if (document.querySelector("#ability-input").value !== '') { document.querySelector("#ability-article").style.display = 'block'; document.querySelector("#ability-article p").textContent = document.querySelector("#ability-input").value; } else { document.querySelector("#ability-article").style.display = "none"; } }); document.querySelector("#ability-article").style.display = "none"; //} Physical Characteristics function checkMentalHiding() { var mental = document.querySelectorAll("section#mental-section span"); var mentalShow = 0; for (var i = 0;i < mental.length;i ++) { if (mental[i].style.display !== "none") { mentalShow ++; break; } } if (mentalShow <= 0) { document.querySelectorAll("section#mental-section h2")[0].style.display = "none"; } else { document.querySelectorAll("section#mental-section h2")[0].style.display = "block"; } } checkMentalHiding(); function checkPersonalHiding() { var personal = document.querySelectorAll("section#personal-section span"); var personalShow = 0; for (var i = 0;i < personal.length;i ++) { if (personal[i].style.display !== "none") { personalShow ++; } } if (personalShow <= 0) { document.querySelectorAll("section#personal-section h2")[0].style.display = "none"; } else { document.querySelectorAll("section#personal-section h2")[0].style.display = "block"; } } checkPersonalHiding(); var checkPhysicalHiding = function() { var physical = document.querySelectorAll("#physical-section span"); var physicalShow = 0; for (var i = 0;i < physical.length;i ++) { if (physical[i].style.display !== "none") { physicalShow ++; } } if (physicalShow === 0) { document.querySelectorAll("#physical-section h2")[0].style.display = "none"; } else { document.querySelectorAll("#physical-section h2")[0].style.display = "block"; } } checkPhysicalHiding(); var checkSidebarHiding = function() { var bar = document.getElementById("sidebar"); var bars = document.querySelectorAll("#sidebar span"); var barShow = 0; for (var i = 0;i < bars.length;i += 2) { if (bars[i].style.display !== "none") { barShow ++; } } if (barShow === 0) { bar.style.display = "none"; } else { bar.style.display = "block"; } }; checkSidebarHiding(); </script><!-- #ThisIsMagic --> <!-- Form submission script --> <script> var name = ""; var ltrs = 0; document.querySelector("#finish-button").addEventListener("click", function() { if (document.querySelector("#title-input").value !== "") { if (document.querySelector("#general-info").value !== "") { var name = document.getElementById("char-titles").value + " " + document.getElementById("char-name-input").value + " " + document.getElementById("char-middle-name").value + " " + document.getElementById("char-last-name").value; document.querySelector("#input-page").style.display = "none"; document.querySelector("#page").style.display = "block"; document.getElementById("char-name").innerHTML = name; checkMentalHiding(); checkPersonalHiding(); checkPhysicalHiding(); checkSidebarHiding(); var page = document.querySelector("#page"); var sidebar = document.querySelector("#sidebar"); if (page.offsetHeight < sidebar.offsetHeight + 50) { page.style.height = (sidebar.offsetHeight + 150) + "px"; } else { page.style.height = "auto"; } } else { alert("Please write general info about the character"); } } else { alert("Please enter Character Name"); } }); </script> <!-- Navbar script --> <script> var startPage = 0; var navScript = function() { var liEls = document.querySelectorAll("nav ul li"); var pages = document.querySelectorAll("div.input-pages"); if (liEls.length !== pages.length) { Errormsg("Nav Script (Pages unequal to sections"); return; } liEls[startPage].className = "active"; pages[startPage].style.display = "block"; function foo(i) { return function() { document.querySelectorAll(".active")[0].className = ""; liEls[i].className = "active"; pages.forEach(function(page) {page.style.display = 'none';}) pages[i].style.display = 'block'; }; } for (var el = 0;el < liEls.length;el ++) { liEls[el].addEventListener('click', foo(el)); } }; navScript(); </script> <!-- Launch page script--> <script> var launchpage = document.getElementById("launch"); document.getElementById("start-button").addEventListener("click", function() { launchpage.style.animation = "1s fade" }); launchpage.addEventListener("animationend", function() { launchpage.style.display = "none"; document.querySelector("#input-page").style.display = "block" document.querySelector("#input-page").style.animation = "1s fade reverse"; }); </script> <!-- Go Back script --> <script> var goBack = document.getElementById("go-back-button"); goBack.addEventListener("click", function() { document.getElementById("page").style.display = "none"; document.getElementById("input-page").style.display = "block" }); </script> <!-- The Thumbnail Script 2.1.0 12/18/2023 by Bluebird@kaid_157624541333313939750668 --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, onclone: e => e.getAnimations().forEach(a=>{ try{ a.finish() }catch{} }) }).then(e => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext('2d').drawImage(e, 0, 0, e.width, e.height, 0, 0, r, r); window.top.postMessage(c.toDataURL(), ""); }).catch(e => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), "*"); } }; </script> </body> </html>
Folds	25,304,306,388,393,566,568,772,774,776,778,797,802,824
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJu5qLCxCQw
Votes	22
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	BoazonDaCat
Author Name	boazon
Author ID	kaid_73656865894951272751214
Author Profile Access	PUBLIC

Archive Data

Added	2 months ago, 1728832114626
Updated	2 months ago, 1731176147969
Source Deleted	unknown