API tools faq
paste
Guest User

HTLM Alt history Tool

a guest
Nov 18th, 2025
180
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.44 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Alternate History Wiki Page Generator</title>
  7. <style>
  8. body { font-family: 'Helvetica Neue', Arial, sans-serif; max-width: 1024px; margin: 0 auto; padding: 20px; line-height: 1.6; background: #f8f9fa; color: #202122; }
  9. form { display: grid; gap: 15px; }
  10. label { font-weight: bold; }
  11. input, textarea { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #a2a9b1; border-radius: 2px; }
  12. button { padding: 12px; background: #36c; color: white; border: none; cursor: pointer; font-size: 16px; border-radius: 2px; }
  13. button:hover { background: #447ff5; }
  14. #output { margin-top: 30px; border: 1px solid #a2a9b1; padding: 20px; background: #f8f9fa; white-space: pre-wrap; font-family: monospace; }
  15. #preview { margin-top: 30px; border: 1px solid #a2a9b1; padding: 20px; background: white; box-shadow: 0 1px 1px rgba(0,0,0,0.05); }
  16. #preview-container { display: flex; }
  17. #sidebar { width: 220px; flex-shrink: 0; margin-right: 20px; font-size: 0.875em; }
  18. #sidebar .toc { border: 1px solid #a2a9b1; background: #f8f9fa; padding: 10px; margin: 0; position: sticky; top: 20px; }
  19. #sidebar .toc h2 { font-size: 1.125em; margin: 0 0 0.5em; border: none; padding: 0; }
  20. #sidebar .toc ul { list-style-type: none; padding: 0; margin: 0; }
  21. #sidebar .toc li { margin: 0.3em 0; }
  22. #main-content { flex: 1; }
  23. #preview h1 { font-size: 1.875em; border-bottom: 1px solid #a2a9b1; padding-bottom: 0.25em; margin: 0 0 0.5em; }
  24. #preview h2 { font-size: 1.5em; border-bottom: 1px solid #a2a9b1; padding-bottom: 0.25em; margin: 1.5em 0 0.5em; }
  25. #preview .infobox { float: right; width: 22em; border: 1px solid #a2a9b1; background: #f8f9fa; margin: 0 0 1em 1em; font-size: 0.875em; line-height: 1.4; }
  26. #preview .infobox th { text-align: center; font-weight: bold; background: #eaecf0; padding: 0.5em; }
  27. #preview .infobox td { padding: 0.5em; border-top: 1px solid #a2a9b1; }
  28. #preview img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
  29. #preview p { margin: 0.5em 0; }
  30. #preview a { color: #0645ad; text-decoration: none; }
  31. #preview a:hover { text-decoration: underline; }
  32. .clear { clear: both; }
  33. </style>
  34. </head>
  35. <body>
  36. <h1>Alternate History Wiki Page Generator</h1>
  37. <p>Create a full wiki-style page for your alternate history scenario. Fill in the details, generate the MediaWiki markup, and copy it to a site like althistory.fandom.com. The preview now emulates Wikipedia's modern layout with the Table of Contents in a left sidebar!</p>
  38.  
  39. <form id="wikiForm">
  40. <label for="title">Page Title:</label>
  41. <input type="text" id="title" placeholder="e.g., United Federation of Atlantis">
  42.  
  43. <label for="infoboxName">Nation/Entity Name (for Infobox):</label>
  44. <input type="text" id="infoboxName" placeholder="e.g., United Federation of Atlantis">
  45.  
  46. <label for="flagUrl">Flag Image URL (or filename after upload):</label>
  47. <input type="text" id="flagUrl" placeholder="e.g., File:Atlantis_flag.png">
  48.  
  49. <label for="capital">Capital:</label>
  50. <input type="text" id="capital" placeholder="e.g., New Atlantis">
  51.  
  52. <label for="government">Government:</label>
  53. <input type="text" id="government" placeholder="e.g., Federal Republic">
  54.  
  55. <label for="leader">Leader:</label>
  56. <input type="text" id="leader" placeholder="e.g., President Aquaman">
  57.  
  58. <label for="population">Population:</label>
  59. <input type="text" id="population" placeholder="e.g., 50 million">
  60.  
  61. <label for="currency">Currency:</label>
  62. <input type="text" id="currency" placeholder="e.g., Atlantean Dollar">
  63.  
  64. <label for="introduction">Introduction (Lead Paragraph):</label>
  65. <textarea id="introduction" rows="4" placeholder="e.g., The United Federation of Atlantis is a sovereign state in an alternate timeline where Atlantis never sank..."></textarea>
  66.  
  67. <label for="history">History Section:</label>
  68. <textarea id="history" rows="6" placeholder="e.g., ==History==\nIn 1492, Columbus discovered Atlantis instead of America...\nUse wiki markup like '''bold''', ''italics'', [[links]]."></textarea>
  69.  
  70. <label for="geography">Geography Section:</label>
  71. <textarea id="geography" rows="6" placeholder="e.g., ==Geography==\nAtlantis spans the Atlantic Ocean...\nAdd images or tables if needed."></textarea>
  72.  
  73. <label for="economy">Economy Section:</label>
  74. <textarea id="economy" rows="6" placeholder="e.g., ==Economy==\nBased on advanced underwater tech..."></textarea>
  75.  
  76. <label for="additionalSections">Additional Sections:</label>
  77. <textarea id="additionalSections" rows="6" placeholder="e.g., ==Culture==\n...\nOr any other sections you want."></textarea>
  78.  
  79. <button type="button" onclick="generateWikiPage()">Generate Wiki Markup</button>
  80. </form>
  81.  
  82. <div id="output"></div>
  83. <div id="preview">
  84. <div id="preview-container">
  85. <div id="sidebar"></div>
  86. <div id="main-content"></div>
  87. </div>
  88. </div>
  89.  
  90. <script>
  91. function generateWikiPage() {
  92. const title = document.getElementById('title').value;
  93. const infoboxName = document.getElementById('infoboxName').value;
  94. const flagUrl = document.getElementById('flagUrl').value;
  95. const capital = document.getElementById('capital').value;
  96. const government = document.getElementById('government').value;
  97. const leader = document.getElementById('leader').value;
  98. const population = document.getElementById('population').value;
  99. const currency = document.getElementById('currency').value;
  100. const introduction = document.getElementById('introduction').value;
  101. const history = document.getElementById('history').value;
  102. const geography = document.getElementById('geography').value;
  103. const economy = document.getElementById('economy').value;
  104. const additionalSections = document.getElementById('additionalSections').value;
  105.  
  106. const infoboxMarkup = `{{Infobox country
  107. | name = ${infoboxName}
  108. | image_flag = ${flagUrl}
  109. | capital = ${capital}
  110. | government = ${government}
  111. | leader_title1 = Leader
  112. | leader_name1 = ${leader}
  113. | population = ${population}
  114. | currency = ${currency}
  115. }}`;
  116.  
  117. const fullMarkup = `${infoboxMarkup}\n\n${introduction}\n\n__TOC__\n\n${history}\n\n${geography}\n\n${economy}\n\n${additionalSections}\n\n[[Category:Alternate History]]`;
  118.  
  119. document.getElementById('output').textContent = fullMarkup;
  120.  
  121. // Simple preview rendering: Convert basic wiki markup to HTML
  122. function wikiToHtml(text) {
  123. text = text.replace(/'''(.*?)'''/g, '<strong>$1</strong>'); // Bold
  124. text = text.replace(/''(.*?)''/g, '<em>$1</em>'); // Italics
  125. text = text.replace(/\[\[(.*?)\]\]/g, '<a href="#">$1</a>'); // Links (dummy href)
  126. text = text.replace(/==([^=]+)==/g, function(match, p1) {
  127. const id = p1.trim().toLowerCase().replace(/\s+/g, '-');
  128. return `<h2 id="${id}">${p1}</h2>`;
  129. }); // Headings with anchors
  130. text = text.replace(/\n/g, '<br>'); // Line breaks
  131. return text;
  132. }
  133.  
  134. const introHtml = wikiToHtml(introduction);
  135. const historyHtml = wikiToHtml(history);
  136. const geographyHtml = wikiToHtml(geography);
  137. const economyHtml = wikiToHtml(economy);
  138. const additionalHtml = wikiToHtml(additionalSections);
  139.  
  140. // Collect headings for TOC
  141. const sections = [historyHtml, geographyHtml, economyHtml, additionalHtml].join('');
  142. const headings = sections.match(/<h2 id="([^"]+)">([^<]+)<\/h2>/g) || [];
  143. let tocItems = '';
  144. headings.forEach((heading, index) => {
  145. const match = heading.match(/<h2 id="([^"]+)">([^<]+)<\/h2>/);
  146. if (match) {
  147. tocItems += `<li><a href="#${match[1]}">${index + 1}. ${match[2]}</a></li>`;
  148. }
  149. });
  150.  
  151. const tocHtml = tocItems ? `
  152. <div class="toc">
  153. <h2>Contents</h2>
  154. <ul>${tocItems}</ul>
  155. </div>
  156. ` : '';
  157.  
  158. const mainContentHtml = `
  159. <h1>${title}</h1>
  160. <div class="infobox">
  161. <table>
  162. <tr><th colspan="2">${infoboxName}</th></tr>
  163. <tr><td colspan="2"><img src="${flagUrl.startsWith('http') ? flagUrl : 'https://via.placeholder.com/220x147?text=Flag'}" alt="Flag"></td></tr>
  164. <tr><td>Capital</td><td>${capital}</td></tr>
  165. <tr><td>Government</td><td>${government}</td></tr>
  166. <tr><td>Leader</td><td>${leader}</td></tr>
  167. <tr><td>Population</td><td>${population}</td></tr>
  168. <tr><td>Currency</td><td>${currency}</td></tr>
  169. </table>
  170. </div>
  171. <p>${introHtml}</p>
  172. ${historyHtml}
  173. ${geographyHtml}
  174. ${economyHtml}
  175. ${additionalHtml}
  176. <div class="clear"></div>
  177. `;
  178.  
  179. document.getElementById('sidebar').innerHTML = tocHtml;
  180. document.getElementById('main-content').innerHTML = mainContentHtml;
  181. }
  182. </script>
  183. </body>
  184. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!