API tools faq
paste
XTaylorSpenceX

Paradoxical Productivity Simulator

XTaylorSpenceX
Oct 9th, 2025
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.85 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>Paradoxical Productivity Sim</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.  
  14.         body {
  15.             font-family: 'Courier New', monospace;
  16.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  17.             min-height: 100vh;
  18.             display: flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             overflow: hidden;
  22.             transition: filter 0.3s ease;
  23.         }
  24.  
  25.         .container {
  26.             background: rgba(20, 20, 30, 0.95);
  27.             border-radius: 20px;
  28.             padding: 30px;
  29.             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  30.             max-width: 600px;
  31.             width: 90%;
  32.             border: 2px solid rgba(255, 255, 255, 0.1);
  33.             transition: all 0.3s ease;
  34.             position: relative;
  35.         }
  36.  
  37.         .glitch-overlay {
  38.             position: absolute;
  39.             top: 0;
  40.             left: 0;
  41.             right: 0;
  42.             bottom: 0;
  43.             pointer-events: none;
  44.             opacity: 0;
  45.             background: repeating-linear-gradient(
  46.                 0deg,
  47.                 rgba(255, 0, 255, 0.03),
  48.                 rgba(0, 255, 255, 0.03) 2px,
  49.                 transparent 2px,
  50.                 transparent 4px
  51.             );
  52.             animation: glitchScan 2s linear infinite;
  53.         }
  54.  
  55.         @keyframes glitchScan {
  56.             0% { transform: translateY(-100%); }
  57.             100% { transform: translateY(100%); }
  58.         }
  59.  
  60.         h1 {
  61.             color: #fff;
  62.             text-align: center;
  63.             margin-bottom: 10px;
  64.             font-size: 28px;
  65.             text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  66.             animation: textGlow 2s ease-in-out infinite;
  67.         }
  68.  
  69.         @keyframes textGlow {
  70.             0%, 100% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
  71.             50% { text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 40px rgba(100, 200, 255, 0.5); }
  72.         }
  73.  
  74.         .chaos-indicator {
  75.             text-align: center;
  76.             color: #00ff88;
  77.             margin-bottom: 20px;
  78.             font-size: 14px;
  79.             text-transform: uppercase;
  80.             letter-spacing: 2px;
  81.         }
  82.  
  83.         .metric {
  84.             margin-bottom: 20px;
  85.             position: relative;
  86.         }
  87.  
  88.         .metric-label {
  89.             color: #fff;
  90.             margin-bottom: 8px;
  91.             display: flex;
  92.             justify-content: space-between;
  93.             align-items: center;
  94.             font-size: 14px;
  95.         }
  96.  
  97.         .metric-value {
  98.             color: #00ff88;
  99.             font-weight: bold;
  100.         }
  101.  
  102.         .progress-bar {
  103.             width: 100%;
  104.             height: 30px;
  105.             background: rgba(255, 255, 255, 0.1);
  106.             border-radius: 15px;
  107.             overflow: hidden;
  108.             position: relative;
  109.             border: 1px solid rgba(255, 255, 255, 0.2);
  110.         }
  111.  
  112.         .progress-fill {
  113.             height: 100%;
  114.             background: linear-gradient(90deg, #00ff88, #00ccff);
  115.             border-radius: 15px;
  116.             transition: width 0.3s ease;
  117.             position: relative;
  118.             overflow: hidden;
  119.         }
  120.  
  121.         .progress-fill::after {
  122.             content: '';
  123.             position: absolute;
  124.             top: 0;
  125.             left: -100%;
  126.             width: 100%;
  127.             height: 100%;
  128.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  129.             animation: shimmer 2s infinite;
  130.         }
  131.  
  132.         @keyframes shimmer {
  133.             0% { left: -100%; }
  134.             100% { left: 100%; }
  135.         }
  136.  
  137.         .warning {
  138.             animation: pulse 0.5s infinite;
  139.         }
  140.  
  141.         @keyframes pulse {
  142.             0%, 100% { transform: scale(1); }
  143.             50% { transform: scale(1.02); }
  144.         }
  145.  
  146.         .critical {
  147.             animation: shake 0.3s infinite;
  148.         }
  149.  
  150.         @keyframes shake {
  151.             0%, 100% { transform: translateX(0); }
  152.             25% { transform: translateX(-2px); }
  153.             75% { transform: translateX(2px); }
  154.         }
  155.  
  156.         .actions {
  157.             display: grid;
  158.             grid-template-columns: 1fr 1fr;
  159.             gap: 10px;
  160.             margin-top: 30px;
  161.         }
  162.  
  163.         button {
  164.             padding: 12px;
  165.             border: none;
  166.             border-radius: 10px;
  167.             background: linear-gradient(135deg, #667eea, #764ba2);
  168.             color: white;
  169.             font-weight: bold;
  170.             cursor: pointer;
  171.             transition: all 0.3s ease;
  172.             text-transform: uppercase;
  173.             font-size: 12px;
  174.             position: relative;
  175.             overflow: hidden;
  176.         }
  177.  
  178.         button::before {
  179.             content: '';
  180.             position: absolute;
  181.             top: 50%;
  182.             left: 50%;
  183.             width: 0;
  184.             height: 0;
  185.             border-radius: 50%;
  186.             background: rgba(255, 255, 255, 0.5);
  187.             transform: translate(-50%, -50%);
  188.             transition: width 0.6s, height 0.6s;
  189.         }
  190.  
  191.         button:hover::before {
  192.             width: 300px;
  193.             height: 300px;
  194.         }
  195.  
  196.         button:hover {
  197.             transform: translateY(-2px);
  198.             box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
  199.         }
  200.  
  201.         button:active {
  202.             transform: translateY(0);
  203.         }
  204.  
  205.         .game-over {
  206.             position: fixed;
  207.             top: 50%;
  208.             left: 50%;
  209.             transform: translate(-50%, -50%);
  210.             background: rgba(0, 0, 0, 0.95);
  211.             padding: 40px;
  212.             border-radius: 20px;
  213.             text-align: center;
  214.             color: white;
  215.             display: none;
  216.             z-index: 1000;
  217.             border: 2px solid #ff0066;
  218.         }
  219.  
  220.         .game-over h2 {
  221.             color: #ff0066;
  222.             margin-bottom: 20px;
  223.             font-size: 32px;
  224.             animation: flicker 0.5s infinite;
  225.         }
  226.  
  227.         @keyframes flicker {
  228.             0%, 100% { opacity: 1; }
  229.             50% { opacity: 0.3; }
  230.         }
  231.  
  232.         .reset-btn {
  233.             background: linear-gradient(135deg, #ff0066, #ff6600);
  234.             padding: 15px 30px;
  235.             font-size: 16px;
  236.         }
  237.  
  238.         .stress-low { filter: hue-rotate(0deg); }
  239.         .stress-medium { filter: hue-rotate(30deg) saturate(1.2); }
  240.         .stress-high { filter: hue-rotate(60deg) saturate(1.5) contrast(1.1); }
  241.         .stress-critical { filter: hue-rotate(90deg) saturate(2) contrast(1.2) brightness(1.1); }
  242.         .stress-chaos { filter: hue-rotate(180deg) saturate(3) contrast(1.5) brightness(1.2); }
  243.  
  244.         .paradox-warning {
  245.             position: fixed;
  246.             top: 20px;
  247.             right: 20px;
  248.             background: rgba(255, 0, 102, 0.9);
  249.             color: white;
  250.             padding: 15px;
  251.             border-radius: 10px;
  252.             display: none;
  253.             animation: slideIn 0.3s ease;
  254.             max-width: 250px;
  255.             border: 2px solid rgba(255, 255, 255, 0.3);
  256.         }
  257.  
  258.         @keyframes slideIn {
  259.             from { transform: translateX(100%); opacity: 0; }
  260.             to { transform: translateX(0); opacity: 1; }
  261.         }
  262.     </style>
  263. </head>
  264. <body>
  265.     <div class="container">
  266.         <div class="glitch-overlay"></div>
  267.         <h1>⚡ PARADOX PRODUCTIVITY ⚡</h1>
  268.         <div class="chaos-indicator">Chaos Balance: <span id="chaos-level">STABLE</span></div>
  269.        
  270.         <div class="metric">
  271.             <div class="metric-label">
  272.                 <span>💼 Work Efficiency</span>
  273.                 <span class="metric-value" id="work-val">50%</span>
  274.             </div>
  275.             <div class="progress-bar">
  276.                 <div class="progress-fill" id="work-bar" style="width: 50%;"></div>
  277.             </div>
  278.         </div>
  279.  
  280.         <div class="metric">
  281.             <div class="metric-label">
  282.                 <span>🧠 Mental Energy</span>
  283.                 <span class="metric-value" id="mental-val">50%</span>
  284.             </div>
  285.             <div class="progress-bar">
  286.                 <div class="progress-fill" id="mental-bar" style="width: 50%;"></div>
  287.             </div>
  288.         </div>
  289.  
  290.         <div class="metric">
  291.             <div class="metric-label">
  292.                 <span>⏰ Time Management</span>
  293.                 <span class="metric-value" id="time-val">50%</span>
  294.             </div>
  295.             <div class="progress-bar">
  296.                 <div class="progress-fill" id="time-bar" style="width: 50%;"></div>
  297.             </div>
  298.         </div>
  299.  
  300.         <div class="metric">
  301.             <div class="metric-label">
  302.                 <span>😊 Happiness</span>
  303.                 <span class="metric-value" id="happiness-val">50%</span>
  304.             </div>
  305.             <div class="progress-bar">
  306.                 <div class="progress-fill" id="happiness-bar" style="width: 50%;"></div>
  307.             </div>
  308.         </div>
  309.  
  310.         <div class="metric">
  311.             <div class="metric-label">
  312.                 <span>☕ Caffeine Levels</span>
  313.                 <span class="metric-value" id="caffeine-val">50%</span>
  314.             </div>
  315.             <div class="progress-bar">
  316.                 <div class="progress-fill" id="caffeine-bar" style="width: 50%;"></div>
  317.             </div>
  318.         </div>
  319.  
  320.         <div class="actions">
  321.             <button onclick="performAction('workFaster')">🚀 Work Faster</button>
  322.             <button onclick="performAction('takeBrake')">☕ Coffee Break</button>
  323.             <button onclick="performAction('delegate')">👥 Delegate Tasks</button>
  324.             <button onclick="performAction('multitask')">🔄 Multitask</button>
  325.             <button onclick="performAction('procrastinate')">⏳ Procrastinate</button>
  326.             <button onclick="performAction('meditate')">🧘 Meditate</button>
  327.             <button onclick="performAction('meeting')">📊 Schedule Meeting</button>
  328.             <button onclick="performAction('automate')">🤖 Automate</button>
  329.         </div>
  330.     </div>
  331.  
  332.     <div class="paradox-warning" id="warning"></div>
  333.  
  334.     <div class="game-over">
  335.         <h2>💥 SYSTEM COLLAPSE 💥</h2>
  336.         <p>The paradox consumed everything!</p>
  337.         <p id="failure-reason"></p>
  338.         <button class="reset-btn" onclick="resetGame()">TRY AGAIN</button>
  339.     </div>
  340.  
  341.     <script>
  342.         let metrics = {
  343.             work: 50,
  344.             mental: 50,
  345.             time: 50,
  346.             happiness: 50,
  347.             caffeine: 50
  348.         };
  349.  
  350.         let gameActive = true;
  351.         let chaosLevel = 0;
  352.  
  353.         const actions = {
  354.             workFaster: {
  355.                 effects: { work: 25, mental: -20, time: -15, happiness: -10, caffeine: -5 },
  356.                 message: "📈 Productivity surged! But at what cost?"
  357.             },
  358.             takeBrake: {
  359.                 effects: { work: -15, mental: 20, time: -10, happiness: 15, caffeine: 30 },
  360.                 message: "☕ Refreshed! But the deadline looms..."
  361.             },
  362.             delegate: {
  363.                 effects: { work: 10, mental: 15, time: 20, happiness: -25, caffeine: 0 },
  364.                 message: "👥 Team stressed! Your karma decreased..."
  365.             },
  366.             multitask: {
  367.                 effects: { work: 15, mental: -30, time: 10, happiness: -5, caffeine: -10 },
  368.                 message: "🌀 Everything at once! Brain overheating..."
  369.             },
  370.             procrastinate: {
  371.                 effects: { work: -30, mental: 10, time: -20, happiness: 25, caffeine: 5 },
  372.                 message: "😎 Living dangerously! Future you will suffer..."
  373.             },
  374.             meditate: {
  375.                 effects: { work: -10, mental: 35, time: -15, happiness: 20, caffeine: -20 },
  376.                 message: "🧘 Inner peace achieved! External chaos grows..."
  377.             },
  378.             meeting: {
  379.                 effects: { work: -5, mental: -25, time: -30, happiness: -15, caffeine: 10 },
  380.                 message: "📊 Meeting scheduled! Everyone's soul died a little..."
  381.             },
  382.             automate: {
  383.                 effects: { work: 30, mental: 5, time: 25, happiness: -20, caffeine: -15 },
  384.                 message: "🤖 Automated! But you're now replaceable..."
  385.             }
  386.         };
  387.  
  388.         function updateMetric(name, value) {
  389.             metrics[name] = Math.max(0, Math.min(100, metrics[name] + value));
  390.             const bar = document.getElementById(`${name}-bar`);
  391.             const val = document.getElementById(`${name}-val`);
  392.            
  393.             bar.style.width = metrics[name] + '%';
  394.             val.textContent = Math.round(metrics[name]) + '%';
  395.            
  396.             // Add visual warnings
  397.             const parent = bar.parentElement.parentElement;
  398.             parent.classList.remove('warning', 'critical');
  399.            
  400.             if (metrics[name] < 20) {
  401.                parent.classList.add('critical');
  402.            } else if (metrics[name] < 35) {
  403.                parent.classList.add('warning');
  404.            }
  405.        }
  406.  
  407.        function performAction(actionName) {
  408.            if (!gameActive) return;
  409.            
  410.            const action = actions[actionName];
  411.            
  412.            // Apply effects with random variance
  413.            for (let [metric, value] of Object.entries(action.effects)) {
  414.                const variance = (Math.random() - 0.5) * 10;
  415.                updateMetric(metric, value + variance);
  416.            }
  417.            
  418.            // Show warning
  419.            showWarning(action.message);
  420.            
  421.            // Check game state
  422.            checkGameState();
  423.            
  424.            // Update chaos level
  425.            updateChaos();
  426.        }
  427.  
  428.        function showWarning(message) {
  429.            const warning = document.getElementById('warning');
  430.            warning.textContent = message;
  431.            warning.style.display = 'block';
  432.            
  433.            setTimeout(() => {
  434.                 warning.style.display = 'none';
  435.             }, 3000);
  436.         }
  437.  
  438.         function updateChaos() {
  439.             const values = Object.values(metrics);
  440.             const avg = values.reduce((a, b) => a + b) / values.length;
  441.             const variance = values.reduce((sum, val) => sum + Math.pow(val - avg, 2), 0) / values.length;
  442.            
  443.             chaosLevel = variance;
  444.            
  445.             const body = document.body;
  446.             const container = document.querySelector('.container');
  447.             const glitch = document.querySelector('.glitch-overlay');
  448.             const chaosText = document.getElementById('chaos-level');
  449.            
  450.             body.className = '';
  451.            
  452.             if (chaosLevel < 200) {
  453.                body.classList.add('stress-low');
  454.                chaosText.textContent = 'STABLE';
  455.                chaosText.style.color = '#00ff88';
  456.                glitch.style.opacity = '0';
  457.            } else if (chaosLevel < 400) {
  458.                body.classList.add('stress-medium');
  459.                chaosText.textContent = 'WOBBLING';
  460.                chaosText.style.color = '#ffff00';
  461.                glitch.style.opacity = '0.1';
  462.            } else if (chaosLevel < 600) {
  463.                body.classList.add('stress-high');
  464.                chaosText.textContent = 'UNSTABLE';
  465.                chaosText.style.color = '#ff9900';
  466.                glitch.style.opacity = '0.2';
  467.                container.style.transform = `rotate(${Math.sin(Date.now() * 0.001) * 2}deg)`;
  468.            } else if (chaosLevel < 800) {
  469.                body.classList.add('stress-critical');
  470.                chaosText.textContent = 'CRITICAL';
  471.                chaosText.style.color = '#ff0066';
  472.                glitch.style.opacity = '0.3';
  473.                container.style.transform = `rotate(${Math.sin(Date.now() * 0.002) * 5}deg)`;
  474.            } else {
  475.                body.classList.add('stress-chaos');
  476.                chaosText.textContent = 'CHAOS REIGNS';
  477.                chaosText.style.color = '#ff00ff';
  478.                glitch.style.opacity = '0.5';
  479.                container.style.transform = `rotate(${Math.sin(Date.now() * 0.003) * 10}deg) scale(${1 + Math.sin(Date.now() * 0.002) * 0.05})`;
  480.            }
  481.        }
  482.  
  483.        function checkGameState() {
  484.            for (let [metric, value] of Object.entries(metrics)) {
  485.                if (value <= 0) {
  486.                    gameOver(metric);
  487.                    return;
  488.                }
  489.            }
  490.            
  491.            // Random paradox events
  492.            if (Math.random() < 0.1) {
  493.                const randomMetric = Object.keys(metrics)[Math.floor(Math.random() * 5)];
  494.                const randomChange = (Math.random() - 0.5) * 20;
  495.                updateMetric(randomMetric, randomChange);
  496.                showWarning('⚡ Paradox surge! Reality shifted...');
  497.            }
  498.        }
  499.  
  500.        function gameOver(failedMetric) {
  501.            gameActive = false;
  502.            const gameOverDiv = document.querySelector('.game-over');
  503.            const reason = document.getElementById('failure-reason');
  504.            
  505.            const reasons = {
  506.                work: 'Productivity reached absolute zero. You became a quantum slacker.',
  507.                mental: 'Mental energy depleted. Your brain achieved perfect entropy.',
  508.                time: 'Time management collapsed. You exist in all moments simultaneously.',
  509.                happiness: 'Happiness evaporated. You achieved corporate nirvana.',
  510.                caffeine: 'Caffeine levels critical. You transcended into pure vibration.'
  511.            };
  512.            
  513.            reason.textContent = reasons[failedMetric] || 'The paradox consumed you.';
  514.            gameOverDiv.style.display = 'block';
  515.        }
  516.  
  517.        function resetGame() {
  518.            metrics = {
  519.                work: 50,
  520.                mental: 50,
  521.                time: 50,
  522.                happiness: 50,
  523.                caffeine: 50
  524.            };
  525.            
  526.            for (let metric of Object.keys(metrics)) {
  527.                updateMetric(metric, 0);
  528.            }
  529.            
  530.            gameActive = true;
  531.            document.querySelector('.game-over').style.display = 'none';
  532.            document.querySelector('.container').style.transform = 'none';
  533.            updateChaos();
  534.        }
  535.  
  536.        // Initialize
  537.        updateChaos();
  538.        
  539.        // Continuous chaos drift
  540.        setInterval(() => {
  541.             if (gameActive) {
  542.                 // Natural entropy
  543.                 for (let metric of Object.keys(metrics)) {
  544.                     updateMetric(metric, (Math.random() - 0.5) * 2);
  545.                 }
  546.                 updateChaos();
  547.             }
  548.         }, 1000);
  549.     </script>
  550. </body>
  551. </html>
  552.  
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!