API tools faq
paste
XTaylorSpenceX

Fossil Fuel Fable Factory

XTaylorSpenceX
Sep 16th, 2025
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.96 KB | None | 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>Fossil Fuel Fable Factory</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.  
  14.         body {
  15.             font-family: 'Georgia', serif;
  16.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  17.             min-height: 100vh;
  18.             color: #333;
  19.             overflow-x: hidden;
  20.         }
  21.  
  22.         .enchanted-bg {
  23.             position: fixed;
  24.             top: 0;
  25.             left: 0;
  26.             width: 100%;
  27.             height: 100%;
  28.             background:
  29.                 radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
  30.                 radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  31.             background-size: 100px 100px;
  32.             animation: twinkle 4s ease-in-out infinite;
  33.             pointer-events: none;
  34.             z-index: -1;
  35.         }
  36.  
  37.         @keyframes twinkle {
  38.             0%, 100% { opacity: 0.3; }
  39.             50% { opacity: 0.8; }
  40.         }
  41.  
  42.         .container {
  43.             max-width: 1200px;
  44.             margin: 0 auto;
  45.             padding: 20px;
  46.             position: relative;
  47.             z-index: 1;
  48.         }
  49.  
  50.         .header {
  51.             text-align: center;
  52.             margin-bottom: 30px;
  53.             color: white;
  54.             text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  55.         }
  56.  
  57.         .header h1 {
  58.             font-size: 3rem;
  59.             margin-bottom: 10px;
  60.             background: linear-gradient(45deg, #ffd700, #ffeb3b);
  61.             -webkit-background-clip: text;
  62.             -webkit-text-fill-color: transparent;
  63.             background-clip: text;
  64.             animation: glow 2s ease-in-out infinite alternate;
  65.         }
  66.  
  67.         @keyframes glow {
  68.             from { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); }
  69.             to { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); }
  70.         }
  71.  
  72.         .story-theater {
  73.             display: grid;
  74.             grid-template-columns: 1fr 1fr;
  75.             gap: 30px;
  76.             margin-bottom: 30px;
  77.         }
  78.  
  79.         .story-canvas {
  80.             background: rgba(255, 255, 255, 0.95);
  81.             border-radius: 20px;
  82.             padding: 30px;
  83.             box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  84.             backdrop-filter: blur(10px);
  85.             position: relative;
  86.             overflow: hidden;
  87.         }
  88.  
  89.         .story-canvas::before {
  90.             content: '';
  91.             position: absolute;
  92.             top: 0;
  93.             left: 0;
  94.             right: 0;
  95.             height: 5px;
  96.             background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
  97.             animation: rainbow 3s ease-in-out infinite;
  98.         }
  99.  
  100.         @keyframes rainbow {
  101.             0%, 100% { transform: translateX(-100%); }
  102.             50% { transform: translateX(100%); }
  103.         }
  104.  
  105.         .data-controls {
  106.             background: rgba(255, 255, 255, 0.9);
  107.             border-radius: 20px;
  108.             padding: 30px;
  109.             box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  110.         }
  111.  
  112.         .character-stage {
  113.             height: 300px;
  114.             position: relative;
  115.             background: linear-gradient(to bottom, #87CEEB 0%, #98FB98 70%, #8FBC8F 100%);
  116.             border-radius: 15px;
  117.             margin-bottom: 20px;
  118.             overflow: hidden;
  119.         }
  120.  
  121.         .dragon {
  122.             position: absolute;
  123.             font-size: 3rem;
  124.             transition: all 0.8s ease;
  125.             animation: dragonFloat 3s ease-in-out infinite;
  126.             cursor: pointer;
  127.         }
  128.  
  129.         @keyframes dragonFloat {
  130.             0%, 100% { transform: translateY(0px) rotate(0deg); }
  131.             50% { transform: translateY(-20px) rotate(5deg); }
  132.         }
  133.  
  134.         .hero {
  135.             position: absolute;
  136.             font-size: 2.5rem;
  137.             transition: all 0.8s ease;
  138.             animation: heroMarch 4s ease-in-out infinite;
  139.             cursor: pointer;
  140.         }
  141.  
  142.         @keyframes heroMarch {
  143.             0%, 100% { transform: translateX(0px); }
  144.             25% { transform: translateX(10px); }
  145.             75% { transform: translateX(-10px); }
  146.         }
  147.  
  148.         .landscape-element {
  149.             position: absolute;
  150.             font-size: 2rem;
  151.             transition: all 1s ease;
  152.             animation: sway 5s ease-in-out infinite;
  153.         }
  154.  
  155.         @keyframes sway {
  156.             0%, 100% { transform: rotate(0deg); }
  157.             50% { transform: rotate(3deg); }
  158.         }
  159.  
  160.         .story-text {
  161.             background: #f8f9fa;
  162.             border-radius: 10px;
  163.             padding: 20px;
  164.             border-left: 5px solid #667eea;
  165.             font-size: 1.1rem;
  166.             line-height: 1.6;
  167.             min-height: 150px;
  168.             animation: textGlow 2s ease-in-out infinite alternate;
  169.         }
  170.  
  171.         @keyframes textGlow {
  172.             from { box-shadow: 0 0 10px rgba(102, 126, 234, 0.3); }
  173.             to { box-shadow: 0 0 20px rgba(102, 126, 234, 0.6); }
  174.         }
  175.  
  176.         .control-group {
  177.             margin-bottom: 20px;
  178.         }
  179.  
  180.         .control-group label {
  181.             display: block;
  182.             font-weight: bold;
  183.             margin-bottom: 8px;
  184.             color: #444;
  185.         }
  186.  
  187.         .data-slider {
  188.             width: 100%;
  189.             height: 8px;
  190.             border-radius: 5px;
  191.             background: #ddd;
  192.             outline: none;
  193.             transition: all 0.3s ease;
  194.             appearance: none;
  195.         }
  196.  
  197.         .data-slider::-webkit-slider-thumb {
  198.             appearance: none;
  199.             width: 20px;
  200.             height: 20px;
  201.             border-radius: 50%;
  202.             background: linear-gradient(45deg, #667eea, #764ba2);
  203.             cursor: pointer;
  204.             box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  205.             transition: all 0.3s ease;
  206.         }
  207.  
  208.         .data-slider::-webkit-slider-thumb:hover {
  209.             transform: scale(1.2);
  210.             box-shadow: 0 6px 12px rgba(0,0,0,0.4);
  211.         }
  212.  
  213.         .data-display {
  214.             background: linear-gradient(45deg, #667eea, #764ba2);
  215.             color: white;
  216.             padding: 10px 15px;
  217.             border-radius: 25px;
  218.             display: inline-block;
  219.             font-weight: bold;
  220.             margin-top: 5px;
  221.             animation: pulse 2s ease-in-out infinite;
  222.         }
  223.  
  224.         @keyframes pulse {
  225.             0%, 100% { transform: scale(1); }
  226.             50% { transform: scale(1.05); }
  227.         }
  228.  
  229.         .magic-button {
  230.             background: linear-gradient(45deg, #ff6b6b, #feca57);
  231.             color: white;
  232.             border: none;
  233.             padding: 15px 30px;
  234.             border-radius: 25px;
  235.             font-size: 1.1rem;
  236.             font-weight: bold;
  237.             cursor: pointer;
  238.             transition: all 0.3s ease;
  239.             box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  240.             margin: 10px 5px;
  241.         }
  242.  
  243.         .magic-button:hover {
  244.             transform: translateY(-3px);
  245.             box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  246.             background: linear-gradient(45deg, #feca57, #ff6b6b);
  247.         }
  248.  
  249.         .data-source {
  250.             background: rgba(72, 219, 251, 0.1);
  251.             border: 2px solid #48dbfb;
  252.             border-radius: 10px;
  253.             padding: 15px;
  254.             margin-top: 20px;
  255.             font-size: 0.9rem;
  256.         }
  257.  
  258.         .environmental-mood {
  259.             position: absolute;
  260.             top: 10px;
  261.             right: 10px;
  262.             font-size: 2rem;
  263.             opacity: 0.7;
  264.             transition: all 1s ease;
  265.         }
  266.  
  267.         .story-title {
  268.             text-align: center;
  269.             color: #667eea;
  270.             font-size: 1.5rem;
  271.             margin-bottom: 15px;
  272.             text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  273.         }
  274.  
  275.         @media (max-width: 768px) {
  276.             .story-theater {
  277.                 grid-template-columns: 1fr;
  278.             }
  279.            
  280.             .header h1 {
  281.                 font-size: 2rem;
  282.             }
  283.            
  284.             .character-stage {
  285.                 height: 200px;
  286.             }
  287.         }
  288.  
  289.         .weather-effect {
  290.             position: absolute;
  291.             width: 100%;
  292.             height: 100%;
  293.             pointer-events: none;
  294.             opacity: 0.6;
  295.         }
  296.  
  297.         .rain-drop {
  298.             position: absolute;
  299.             background: linear-gradient(to bottom, transparent, #4a90e2);
  300.             width: 2px;
  301.             height: 20px;
  302.             animation: rainfall 1s linear infinite;
  303.         }
  304.  
  305.         @keyframes rainfall {
  306.             0% { top: -20px; opacity: 1; }
  307.             100% { top: 100%; opacity: 0; }
  308.         }
  309.        
  310.         .story-prologue {
  311.             font-style: italic;
  312.             text-align: center;
  313.             margin-bottom: 20px;
  314.             color: #f8f9fa;
  315.             text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  316.             font-size: 1.2rem;
  317.         }
  318.        
  319.         .fable-counter {
  320.             position: absolute;
  321.             bottom: 10px;
  322.             left: 10px;
  323.             background: rgba(255, 255, 255, 0.8);
  324.             padding: 5px 10px;
  325.             border-radius: 15px;
  326.             font-size: 0.9rem;
  327.             box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  328.         }
  329.     </style>
  330. </head>
  331. <body>
  332.     <div class="enchanted-bg"></div>
  333.    
  334.     <div class="container">
  335.         <div class="header">
  336.             <h1>🧚‍♀️ Fossil Fuel Fable Factory 🐉</h1>
  337.             <p class="story-prologue">In a realm where data becomes destiny, your choices shape the epic tale of our planet's future...</p>
  338.         </div>
  339.  
  340.         <div class="story-theater">
  341.             <div class="story-canvas">
  342.                 <div class="story-title">✨ Your Enchanted Tale ✨</div>
  343.                 <div class="character-stage" id="stage">
  344.                     <div class="environmental-mood" id="mood">🌤️</div>
  345.                     <div class="weather-effect" id="weather"></div>
  346.                     <div class="fable-counter" id="fableCounter">Fable #1</div>
  347.                 </div>
  348.                 <div class="story-text" id="storyText">
  349.                     Welcome, Storyweaver! In the mystical realm of Earthlandia, the balance between ancient carbon dragons and renewable heroes hangs in delicate equilibrium. Adjust the environmental data controls to shape an epic tale of ecological struggle and hope. Will the dragons of darkness prevail, or will the champions of light restore harmony to the realm?
  350.                 </div>
  351.             </div>
  352.  
  353.             <div class="data-controls">
  354.                 <div class="control-group">
  355.                     <label for="carbonEmissions">🐉 Carbon Dragon Power (CO₂ ppm)</label>
  356.                     <input type="range" id="carbonEmissions" class="data-slider" min="280" max="450" value="420">
  357.                     <div class="data-display" id="carbonDisplay">420 ppm</div>
  358.                 </div>
  359.  
  360.                 <div class="control-group">
  361.                     <label for="renewableEnergy">⚡ Renewable Hero Strength (%)</label>
  362.                     <input type="range" id="renewableEnergy" class="data-slider" min="0" max="100" value="30">
  363.                     <div class="data-display" id="renewableDisplay">30%</div>
  364.                 </div>
  365.  
  366.                 <div class="control-group">
  367.                     <label for="temperature">🌡️ Global Temperature Rise (°C)</label>
  368.                     <input type="range" id="temperature" class="data-slider" min="0" max="3" step="0.1" value="1.1">
  369.                     <div class="data-display" id="tempDisplay">+1.1°C</div>
  370.                 </div>
  371.  
  372.                 <div class="control-group">
  373.                     <label for="forestCover">🌳 Forest Guardian Army (%)</label>
  374.                     <input type="range" id="forestCover" class="data-slider" min="10" max="90" value="31">
  375.                     <div class="data-display" id="forestDisplay">31%</div>
  376.                 </div>
  377.  
  378.                 <button class="magic-button" onclick="generateNewStory()">🎭 Weave New Tale</button>
  379.                 <button class="magic-button" onclick="saveStory()">💾 Chronicle This Story</button>
  380.  
  381.                 <div class="data-source">
  382.                     <strong>📊 Prophetic Sources:</strong> Atmospheric CO₂ levels, renewable energy percentages, global temperature anomalies, and forest coverage data are based on ancient environmental scrolls from sources like NOAA, IEA, and FAO.
  383.                 </div>
  384.             </div>
  385.         </div>
  386.     </div>
  387.  
  388.     <script>
  389.         class FableFuelFactory {
  390.             constructor() {
  391.                 this.currentStory = '';
  392.                 this.characters = {
  393.                     dragons: [],
  394.                     heroes: [],
  395.                     guardians: []
  396.                 };
  397.                 this.storyTemplates = [
  398.                     "In the mystical realm of Earthlandia, where {carbonLevel} carbon dragons roam the skies, {heroCount} brave renewable heroes have risen to challenge their dominance. The ancient forest guardians, numbering {forestPercent}% of their original strength, {forestAction} as the temperature rises by {tempRise}°C above the old magic's baseline. {outcome}",
  399.                     "Long ago, when the world was young, the balance between light and shadow was maintained by the eternal dance of carbon dragons and renewable champions. Now, with {carbonLevel} darkness spreading and only {heroStrength}% of the light remaining, the fate of the realm hangs in the balance. {outcome}",
  400.                     "Deep in the Crystal Caves of Climate, an ancient prophecy speaks of a time when {carbonLevel} shadow beasts would emerge from the depths. Only when the renewable guardians achieve {heroStrength}% of their true power can they hope to restore the {landscapeCondition} to its former glory. {outcome}",
  401.                     "The Chronicles of the Green Kingdom tell of brave eco-warriors who must face the {carbonThreat} while protecting the {forestState} that shelter the last hopes of the realm. With temperatures rising {tempRise}°C beyond the ancient equilibrium, time is running short. {outcome}",
  402.                     "In the floating cities of Sustainia, where renewable energy crystals power the floating islands, {heroCount} sky-sailors battle against the {carbonLevel} storm dragons that threaten to shroud the world in eternal darkness. {outcome}",
  403.                     "The Oracle of Equilibrium foretold this very moment: when {carbonLevel} beasts would clash with {renewableLevel} champions under a sky that burns {tempRise}°C hotter than in ages past. {outcome}",
  404.                     "From the Ashen Peaks to the Glimmering Coast, the {forestState} whisper tales of the Great Balance that once was. Now, with {carbonThreat} looming, the {renewableLevel} heroes must rally the {forestPercent}% remaining forest guardians. {outcome}",
  405.                     "When the Twin Suns of Solution rise, they reveal the stark truth: the {carbonLevel} dragons have grown powerful indeed, while the renewable heroes muster only {heroStrength}% of their potential strength. {outcome}"
  406.                 ];
  407.                 this.outcomes = [
  408.                     "The fate of the realm now rests in your hands, Storyweaver.",
  409.                     "What happens next depends on the choices we make today.",
  410.                     "This chapter remains unfinished, awaiting the actions of mortal kind.",
  411.                     "The next page of this story has yet to be written by human hands.",
  412.                     "How this tale concludes is a mystery that only time will reveal.",
  413.                     "The ending of this fable is ours to determine.",
  414.                     "This chronicle awaits its conclusion in the annals of time.",
  415.                     "The final verse of this song has not yet been composed."
  416.                 ];
  417.                 this.fableCount = 1;
  418.                 this.init();
  419.             }
  420.  
  421.             init() {
  422.                 this.setupEventListeners();
  423.                 this.updateStory();
  424.                 this.createInitialCharacters();
  425.                 this.startAnimationLoop();
  426.             }
  427.  
  428.             setupEventListeners() {
  429.                 document.getElementById('carbonEmissions').addEventListener('input', () => this.updateStory());
  430.                 document.getElementById('renewableEnergy').addEventListener('input', () => this.updateStory());
  431.                 document.getElementById('temperature').addEventListener('input', () => this.updateStory());
  432.                 document.getElementById('forestCover').addEventListener('input', () => this.updateStory());
  433.             }
  434.  
  435.             updateStory() {
  436.                 const carbon = parseInt(document.getElementById('carbonEmissions').value);
  437.                 const renewable = parseInt(document.getElementById('renewableEnergy').value);
  438.                 const temp = parseFloat(document.getElementById('temperature').value);
  439.                 const forest = parseInt(document.getElementById('forestCover').value);
  440.  
  441.                 // Update displays
  442.                 document.getElementById('carbonDisplay').textContent = `${carbon} ppm`;
  443.                 document.getElementById('renewableDisplay').textContent = `${renewable}%`;
  444.                 document.getElementById('tempDisplay').textContent = `+${temp}°C`;
  445.                 document.getElementById('forestDisplay').textContent = `${forest}%`;
  446.  
  447.                 // Update characters and story
  448.                 this.updateCharacters(carbon, renewable, temp, forest);
  449.                 this.updateLandscape(carbon, renewable, temp, forest);
  450.                 this.generateStoryText(carbon, renewable, temp, forest);
  451.                 this.updateWeatherEffects(temp, carbon);
  452.             }
  453.  
  454.             updateCharacters(carbon, renewable, temp, forest) {
  455.                 const stage = document.getElementById('stage');
  456.                
  457.                 // Clear existing characters
  458.                 const existingChars = stage.querySelectorAll('.dragon, .hero, .landscape-element');
  459.                 existingChars.forEach(el => el.remove());
  460.  
  461.                 // Add dragons based on carbon levels
  462.                 const dragonCount = Math.floor((carbon - 280) / 30) + 1;
  463.                 const dragonSize = Math.min(carbon / 280, 2);
  464.                
  465.                 for (let i = 0; i < Math.min(dragonCount, 5); i++) {
  466.                    const dragon = document.createElement('div');
  467.                    dragon.className = 'dragon';
  468.                    dragon.textContent = carbon > 400 ? '🐲' : carbon > 350 ? '🐉' : '🦎';
  469.                     dragon.style.left = `${20 + i * 15}%`;
  470.                     dragon.style.top = `${20 + i * 10}%`;
  471.                     dragon.style.fontSize = `${2 + dragonSize}rem`;
  472.                     dragon.style.opacity = Math.min(carbon / 450, 1);
  473.                     dragon.style.filter = `hue-rotate(${carbon - 280}deg)`;
  474.                     stage.appendChild(dragon);
  475.                 }
  476.  
  477.                 // Add renewable heroes
  478.                 const heroCount = Math.floor(renewable / 20) + 1;
  479.                 const heroTypes = ['⚡', '🌞', '💨', '🌊', '🔋'];
  480.                
  481.                 for (let i = 0; i < Math.min(heroCount, 5); i++) {
  482.                    const hero = document.createElement('div');
  483.                    hero.className = 'hero';
  484.                    hero.textContent = heroTypes[i % heroTypes.length];
  485.                    hero.style.right = `${20 + i * 15}%`;
  486.                    hero.style.bottom = `${30 + i * 10}%`;
  487.                    hero.style.fontSize = `${1.5 + renewable / 50}rem`;
  488.                    hero.style.opacity = Math.min(renewable / 100, 1);
  489.                    hero.style.filter = `brightness(${100 + renewable}%)`;
  490.                    stage.appendChild(hero);
  491.                }
  492.  
  493.                // Add forest guardians
  494.                const treeCount = Math.floor(forest / 15) + 1;
  495.                const treeTypes = ['🌲', '🌳', '🌴', '🎋', '🌿'];
  496.                
  497.                for (let i = 0; i < Math.min(treeCount, 6); i++) {
  498.                    const tree = document.createElement('div');
  499.                    tree.className = 'landscape-element';
  500.                    tree.textContent = treeTypes[i % treeTypes.length];
  501.                    tree.style.left = `${10 + i * 12}%`;
  502.                    tree.style.bottom = '10%';
  503.                    tree.style.opacity = Math.min(forest / 100, 1);
  504.                    tree.style.filter = `saturate(${forest + 50}%)`;
  505.                    stage.appendChild(tree);
  506.                }
  507.            }
  508.  
  509.            updateLandscape(carbon, renewable, temp, forest) {
  510.                const stage = document.getElementById('stage');
  511.                let skyColor, groundColor;
  512.  
  513.                // Change landscape based on environmental conditions
  514.                if (temp > 2) {
  515.                     skyColor = '#FF6B6B'; // Red sky for extreme warming
  516.                     groundColor = '#DEB887'; // Desert-like ground
  517.                 } else if (temp > 1.5) {
  518.                     skyColor = '#FFA07A'; // Orange sky for high warming
  519.                     groundColor = '#DAA520'; // Golden ground
  520.                 } else if (renewable > 70) {
  521.                     skyColor = '#87CEEB'; // Clear blue sky for high renewables
  522.                     groundColor = '#90EE90'; // Lush green ground
  523.                 } else if (carbon > 400) {
  524.                     skyColor = '#696969'; // Gray sky for high carbon
  525.                     groundColor = '#8FBC8F'; // Faded green
  526.                 } else {
  527.                     skyColor = '#87CEEB'; // Default blue
  528.                     groundColor = '#98FB98'; // Default green
  529.                 }
  530.  
  531.                 stage.style.background = `linear-gradient(to bottom, ${skyColor} 0%, ${groundColor} 70%, #8FBC8F 100%)`;
  532.  
  533.                 // Update environmental mood indicator
  534.                 const mood = document.getElementById('mood');
  535.                 if (renewable > 80 && carbon < 350) {
  536.                    mood.textContent = '🌈';
  537.                 } else if (temp > 2.5) {
  538.                     mood.textContent = '🔥';
  539.                 } else if (carbon > 420) {
  540.                     mood.textContent = '☁️';
  541.                 } else if (renewable > 50) {
  542.                     mood.textContent = '☀️';
  543.                 } else {
  544.                     mood.textContent = '🌤️';
  545.                 }
  546.             }
  547.  
  548.             generateStoryText(carbon, renewable, temp, forest) {
  549.                 const template = this.storyTemplates[Math.floor(Math.random() * this.storyTemplates.length)];
  550.                 const outcome = this.outcomes[Math.floor(Math.random() * this.outcomes.length)];
  551.                
  552.                 const carbonLevel = carbon > 420 ? "mighty, smoke-belching" : carbon > 380 ? "growing, ominous" : carbon > 320 ? "awakening, restless" : "slumbering but stirring";
  553.                 const heroStrength = renewable;
  554.                 const heroCount = Math.floor(renewable / 20) + 1;
  555.                 const tempRise = temp;
  556.                 const forestPercent = forest;
  557.                 const forestAction = forest > 60 ? "stand strong and united, their roots deep and unwavering" : forest > 30 ? "struggle to maintain their ancient magic against the encroaching darkness" : "desperately fight for survival, their numbers dwindling by the day";
  558.                 const forestState = forest > 60 ? "thriving, ancient woodlands" : forest > 30 ? "remaining, resilient groves" : "last, sacred trees";
  559.                 const carbonThreat = carbon > 400 ? "overwhelming darkness of the carbon storms" : carbon > 350 ? "rising shadow of the emissions curse" : "whispers of ancient carbon spirits awakening";
  560.                 const landscapeCondition = renewable > 70 ? "pristine, crystal-clear valleys" : renewable > 40 ? "slowly healing meadowlands" : "wounded, suffering earthscape";
  561.                 const renewableLevel = renewable > 80 ? "brilliantly powerful" : renewable > 50 ? "steadily growing" : renewable > 20 ? "flickering but determined" : "desperately weak";
  562.  
  563.                 const story = template
  564.                     .replace(/{carbonLevel}/g, carbonLevel)
  565.                     .replace(/{heroStrength}/g, heroStrength)
  566.                     .replace(/{heroCount}/g, heroCount)
  567.                     .replace(/{tempRise}/g, tempRise)
  568.                     .replace(/{forestPercent}/g, forestPercent)
  569.                     .replace(/{forestAction}/g, forestAction)
  570.                     .replace(/{forestState}/g, forestState)
  571.                     .replace(/{carbonThreat}/g, carbonThreat)
  572.                     .replace(/{landscapeCondition}/g, landscapeCondition)
  573.                     .replace(/{renewableLevel}/g, renewableLevel)
  574.                     .replace(/{outcome}/g, outcome);
  575.  
  576.                 document.getElementById('storyText').innerHTML = story;
  577.                 this.currentStory = story;
  578.             }
  579.  
  580.             updateWeatherEffects(temp, carbon) {
  581.                 const weather = document.getElementById('weather');
  582.                 weather.innerHTML = '';
  583.  
  584.                 if (temp > 2) {
  585.                     // Heat waves effect
  586.                     weather.innerHTML = '<div style="position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 40%, rgba(255,0,0,0.1) 50%, transparent 60%); animation: heatwave 2s ease-in-out infinite;"></div>';
  587.                 } else if (carbon > 420) {
  588.                     // Smog effect
  589.                     for (let i = 0; i < 5; i++) {
  590.                        const smog = document.createElement('div');
  591.                        smog.style.cssText = `
  592.                            position: absolute;
  593.                            background: rgba(128,128,128,0.3);
  594.                            border-radius: 50%;
  595.                            width: ${50 + Math.random() * 100}px;
  596.                            height: ${20 + Math.random() * 40}px;
  597.                            top: ${Math.random() * 50}%;
  598.                            left: ${Math.random() * 100}%;
  599.                            animation: smogDrift ${3 + Math.random() * 2}s ease-in-out infinite;
  600.                        `;
  601.                        weather.appendChild(smog);
  602.                    }
  603.                } else if (carbon < 320) {
  604.                    // Clear sky with occasional sparkles
  605.                    for (let i = 0; i < 3; i++) {
  606.                        const sparkle = document.createElement('div');
  607.                        sparkle.style.cssText = `
  608.                            position: absolute;
  609.                            background: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 70%);
  610.                            width: ${5 + Math.random() * 10}px;
  611.                            height: ${5 + Math.random() * 10}px;
  612.                            top: ${Math.random() * 100}%;
  613.                            left: ${Math.random() * 100}%;
  614.                            animation: twinkle ${2 + Math.random() * 2}s ease-in-out infinite;
  615.                            border-radius: 50%;
  616.                        `;
  617.                        weather.appendChild(sparkle);
  618.                    }
  619.                }
  620.            }
  621.  
  622.            createInitialCharacters() {
  623.                // Initial setup is handled by updateStory()
  624.            }
  625.  
  626.            startAnimationLoop() {
  627.                // Add some ambient magical effects
  628.                setInterval(() => {
  629.                     this.addMagicalSparkle();
  630.                 }, 2000);
  631.             }
  632.  
  633.             addMagicalSparkle() {
  634.                 const stage = document.getElementById('stage');
  635.                 const sparkle = document.createElement('div');
  636.                 sparkle.textContent = '✨';
  637.                 sparkle.style.cssText = `
  638.                     position: absolute;
  639.                     left: ${Math.random() * 100}%;
  640.                     top: ${Math.random() * 100}%;
  641.                     font-size: 1rem;
  642.                     pointer-events: none;
  643.                     animation: sparkleEffect 2s ease-out forwards;
  644.                 `;
  645.                 stage.appendChild(sparkle);
  646.  
  647.                 setTimeout(() => sparkle.remove(), 2000);
  648.             }
  649.            
  650.             incrementFableCount() {
  651.                 this.fableCount++;
  652.                 document.getElementById('fableCounter').textContent = `Fable #${this.fableCount}`;
  653.             }
  654.         }
  655.  
  656.         // Global functions for buttons
  657.         function generateNewStory() {
  658.             // Randomize some values for a new story
  659.             document.getElementById('carbonEmissions').value = 300 + Math.random() * 150;
  660.             document.getElementById('renewableEnergy').value = Math.random() * 100;
  661.             document.getElementById('temperature').value = (Math.random() * 3).toFixed(1);
  662.             document.getElementById('forestCover').value = 20 + Math.random() * 70;
  663.            
  664.             factory.updateStory();
  665.             factory.incrementFableCount();
  666.         }
  667.  
  668.         function saveStory() {
  669.             const story = factory.currentStory;
  670.             const blob = new Blob([story], { type: 'text/plain' });
  671.             const url = URL.createObjectURL(blob);
  672.             const a = document.createElement('a');
  673.             a.href = url;
  674.             a.download = 'my-environmental-fable.txt';
  675.             document.body.appendChild(a);
  676.             a.click();
  677.             document.body.removeChild(a);
  678.             URL.revokeObjectURL(url);
  679.            
  680.             // Show a magical confirmation
  681.             const button = document.querySelector('[onclick="saveStory()"]');
  682.             const originalText = button.textContent;
  683.             button.textContent = '📜 Story Saved!';
  684.             setTimeout(() => {
  685.                 button.textContent = originalText;
  686.             }, 2000);
  687.         }
  688.  
  689.         // Add CSS animations dynamically
  690.         const style = document.createElement('style');
  691.         style.textContent = `
  692.             @keyframes sparkleEffect {
  693.                 0% { opacity: 1; transform: scale(0) rotate(0deg); }
  694.                 50% { opacity: 1; transform: scale(1) rotate(180deg); }
  695.                 100% { opacity: 0; transform: scale(0) rotate(360deg); }
  696.             }
  697.            
  698.             @keyframes heatwave {
  699.                 0%, 100% { transform: translateX(-100%); }
  700.                 50% { transform: translateX(100%); }
  701.             }
  702.            
  703.             @keyframes smogDrift {
  704.                 0%, 100% { transform: translateX(0px); opacity: 0.3; }
  705.                 50% { transform: translateX(20px); opacity: 0.6; }
  706.             }
  707.            
  708.             @keyframes twinkle {
  709.                 0%, 100% { opacity: 0.3; transform: scale(1); }
  710.                 50% { opacity: 1; transform: scale(1.2); }
  711.             }
  712.         `;
  713.         document.head.appendChild(style);
  714.  
  715.         // Initialize the factory
  716.         const factory = new FableFuelFactory();
  717.     </script>
  718. </body>
  719. </html>
  720.  
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!