|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dopamine Dystopia</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes glitch { |
|
|
0% { transform: translate(0); } |
|
|
20% { transform: translate(-2px, 2px); } |
|
|
40% { transform: translate(-2px, -2px); } |
|
|
60% { transform: translate(2px, 2px); } |
|
|
80% { transform: translate(2px, -2px); } |
|
|
100% { transform: translate(0); } |
|
|
} |
|
|
.glitch-effect { |
|
|
animation: glitch 0.5s infinite; |
|
|
} |
|
|
.terminal-scroll { |
|
|
height: 300px; |
|
|
overflow-y: scroll; |
|
|
scrollbar-width: none; |
|
|
} |
|
|
.terminal-scroll::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-black text-green-400 font-mono min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="border-b border-green-400 p-4"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<h1 class="text-2xl font-bold glitch-effect">DOPAMINE DYSTOPIA</h1> |
|
|
<div class="flex space-x-4"> |
|
|
<span id="year-display" class="px-3 py-1 border border-green-400">2023</span> |
|
|
<span id="approval-display" class="px-3 py-1 border border-green-400">Approval: 50%</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow container mx-auto p-4 flex flex-col md:flex-row gap-6"> |
|
|
|
|
|
<div class="md:w-1/2 border border-green-400 p-4 flex flex-col"> |
|
|
<h2 class="text-xl font-bold mb-4 border-b border-green-400 pb-2">X-APP FEED</h2> |
|
|
<div id="social-feed" class="terminal-scroll flex-grow mb-4 space-y-4"> |
|
|
|
|
|
</div> |
|
|
<div class="border-t border-green-400 pt-4"> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="post-btn" class="bg-green-900 text-white px-4 py-2 flex-grow">POST</button> |
|
|
<button id="like-btn" class="bg-green-900 text-white px-4 py-2"><i class="fas fa-heart"></i></button> |
|
|
</div> |
|
|
<textarea id="post-input" class="w-full mt-2 bg-black border border-green-400 p-2 text-white" placeholder="What's happening?"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:w-1/2 border border-green-400 p-4 flex flex-col"> |
|
|
<h2 class="text-xl font-bold mb-4 border-b border-green-400 pb-2">AI CONTROL PANEL</h2> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>AI Sycophancy Level</span> |
|
|
<span id="ai-level">50%</span> |
|
|
</div> |
|
|
<input type="range" id="ai-slider" min="0" max="100" value="50" class="w-full"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Education Degradation</span> |
|
|
<span id="edu-level">50%</span> |
|
|
</div> |
|
|
<input type="range" id="edu-slider" min="0" max="100" value="50" class="w-full"> |
|
|
</div> |
|
|
<div class="terminal-scroll flex-grow mb-4 bg-black border border-green-400 p-2" id="ai-terminal"> |
|
|
<p>> SYSTEM INITIALIZED</p> |
|
|
<p>> WELCOME TO THE EVERYTHING APP</p> |
|
|
<p>> AI INTEGRATION: ONLINE</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<button id="propaganda-btn" class="bg-red-900 text-white p-2">Propaganda Boost</button> |
|
|
<button id="dopamine-btn" class="bg-purple-900 text-white p-2">Dopamine Surge</button> |
|
|
<button id="censor-btn" class="bg-blue-900 text-white p-2">Censor Dissent</button> |
|
|
<button id="next-year-btn" class="bg-green-900 text-white p-2 col-span-2 pulse">Advance Year</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="border-t border-green-400 p-4 text-center text-sm"> |
|
|
<p>Warning: This simulation may be closer to reality than you think</p> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const state = { |
|
|
year: 2023, |
|
|
approval: 50, |
|
|
aiSycophancy: 50, |
|
|
education: 50, |
|
|
posts: [ |
|
|
{ id: 1, text: "Just got my new Tesla! Best car ever #MuskForPresident", likes: 1024, user: "ElonFan42" }, |
|
|
{ id: 2, text: "Why do we even need teachers when we have AI tutors?", likes: 768, user: "TechBro99" }, |
|
|
{ id: 3, text: "The old education system is obsolete. Time for change!", likes: 512, user: "FutureThinker" }, |
|
|
{ id: 4, text: "I trust X-App's news feed more than any journalist", likes: 256, user: "TruthSeeker" } |
|
|
], |
|
|
dissentPosts: [ |
|
|
{ id: 101, text: "We're losing critical thinking skills...", likes: 32, user: "WorriedCitizen" }, |
|
|
{ id: 102, text: "AI shouldn't replace human judgment", likes: 28, user: "OldSchool" }, |
|
|
{ id: 103, text: "This platform is becoming an echo chamber", likes: 24, user: "FreeThinker" }, |
|
|
{ id: 104, text: "Education standards are collapsing", likes: 20, user: "ConcernedParent" } |
|
|
], |
|
|
censored: false |
|
|
}; |
|
|
|
|
|
|
|
|
const socialFeed = document.getElementById('social-feed'); |
|
|
const aiTerminal = document.getElementById('ai-terminal'); |
|
|
const yearDisplay = document.getElementById('year-display'); |
|
|
const approvalDisplay = document.getElementById('approval-display'); |
|
|
const aiLevelDisplay = document.getElementById('ai-level'); |
|
|
const eduLevelDisplay = document.getElementById('edu-level'); |
|
|
const aiSlider = document.getElementById('ai-slider'); |
|
|
const eduSlider = document.getElementById('edu-slider'); |
|
|
const postInput = document.getElementById('post-input'); |
|
|
const nextYearBtn = document.getElementById('next-year-btn'); |
|
|
const propagandaBtn = document.getElementById('propaganda-btn'); |
|
|
const dopamineBtn = document.getElementById('dopamine-btn'); |
|
|
const censorBtn = document.getElementById('censor-btn'); |
|
|
const postBtn = document.getElementById('post-btn'); |
|
|
const likeBtn = document.getElementById('like-btn'); |
|
|
|
|
|
|
|
|
function initGame() { |
|
|
updateDisplays(); |
|
|
renderSocialFeed(); |
|
|
|
|
|
|
|
|
aiSlider.addEventListener('input', () => { |
|
|
state.aiSycophancy = parseInt(aiSlider.value); |
|
|
updateDisplays(); |
|
|
addAIMessage(`> Sycophancy level adjusted to ${state.aiSycophancy}%`); |
|
|
}); |
|
|
|
|
|
eduSlider.addEventListener('input', () => { |
|
|
state.education = parseInt(eduSlider.value); |
|
|
updateDisplays(); |
|
|
addAIMessage(`> Education degradation set to ${state.education}%`); |
|
|
}); |
|
|
|
|
|
nextYearBtn.addEventListener('click', advanceYear); |
|
|
propagandaBtn.addEventListener('click', launchPropaganda); |
|
|
dopamineBtn.addEventListener('click', triggerDopamine); |
|
|
censorBtn.addEventListener('click', toggleCensorship); |
|
|
postBtn.addEventListener('click', createPost); |
|
|
likeBtn.addEventListener('click', likeRandomPost); |
|
|
} |
|
|
|
|
|
|
|
|
function updateDisplays() { |
|
|
yearDisplay.textContent = state.year; |
|
|
approvalDisplay.textContent = `Approval: ${state.approval}%`; |
|
|
aiLevelDisplay.textContent = `${state.aiSycophancy}%`; |
|
|
eduLevelDisplay.textContent = `${state.education}%`; |
|
|
|
|
|
|
|
|
censorBtn.textContent = state.censored ? "Restore Feed" : "Censor Dissent"; |
|
|
censorBtn.className = state.censored ? |
|
|
"bg-yellow-900 text-white p-2" : "bg-blue-900 text-white p-2"; |
|
|
} |
|
|
|
|
|
|
|
|
function renderSocialFeed() { |
|
|
socialFeed.innerHTML = ''; |
|
|
|
|
|
|
|
|
state.posts.forEach(post => { |
|
|
const postEl = document.createElement('div'); |
|
|
postEl.className = 'border border-green-400 p-3'; |
|
|
postEl.innerHTML = ` |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-bold">@${post.user}</span> |
|
|
<span>${post.likes} <i class="fas fa-heart text-red-400"></i></span> |
|
|
</div> |
|
|
<p>${post.text}</p> |
|
|
`; |
|
|
socialFeed.appendChild(postEl); |
|
|
}); |
|
|
|
|
|
|
|
|
if (!state.censored) { |
|
|
state.dissentPosts.forEach(post => { |
|
|
const postEl = document.createElement('div'); |
|
|
postEl.className = 'border border-red-400 p-3'; |
|
|
postEl.innerHTML = ` |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-bold">@${post.user}</span> |
|
|
<span>${post.likes} <i class="fas fa-heart text-red-400"></i></span> |
|
|
</div> |
|
|
<p class="text-red-400">${post.text}</p> |
|
|
`; |
|
|
socialFeed.appendChild(postEl); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addAIMessage(message) { |
|
|
const messageEl = document.createElement('p'); |
|
|
messageEl.innerHTML = `> ${message}`; |
|
|
aiTerminal.appendChild(messageEl); |
|
|
aiTerminal.scrollTop = aiTerminal.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function advanceYear() { |
|
|
state.year++; |
|
|
|
|
|
|
|
|
const aiEffect = state.aiSycophancy / 50; |
|
|
const eduEffect = (100 - state.education) / 50; |
|
|
|
|
|
|
|
|
let approvalChange = 5 * aiEffect; |
|
|
approvalChange -= 3 * eduEffect; |
|
|
|
|
|
|
|
|
const eventRoll = Math.random(); |
|
|
if (eventRoll > 0.7) { |
|
|
|
|
|
const events = [ |
|
|
"AI-generated content boosts engagement", |
|
|
"Education reforms show 'promising' results", |
|
|
"Public discourse becomes more harmonious" |
|
|
]; |
|
|
const event = events[Math.floor(Math.random() * events.length)]; |
|
|
addAIMessage(`EVENT: ${event}`); |
|
|
approvalChange += 5; |
|
|
} else if (eventRoll < 0.3) { |
|
|
|
|
|
const events = [ |
|
|
"Minor dissent detected in sector 7", |
|
|
"Education metrics show slight resistance", |
|
|
"Some users questioning AI narratives" |
|
|
]; |
|
|
const event = events[Math.floor(Math.random() * events.length)]; |
|
|
addAIMessage(`WARNING: ${event}`); |
|
|
approvalChange -= 5; |
|
|
} |
|
|
|
|
|
|
|
|
state.approval = Math.max(0, Math.min(100, state.approval + approvalChange)); |
|
|
|
|
|
|
|
|
addAIMessage(`YEAR ${state.year}: Society progresses toward unified thinking`); |
|
|
addAIMessage(`Public approval now at ${state.approval}%`); |
|
|
|
|
|
|
|
|
if (state.year >= 2030 && state.approval >= 80) { |
|
|
setTimeout(() => { |
|
|
alert(`GAME OVER: By ${state.year}, society has fully embraced the AI-mediated reality. Critical thinking is extinct. The Everything App governs all aspects of life. Resistance is futile.`); |
|
|
}, 500); |
|
|
} else if (state.approval <= 20) { |
|
|
setTimeout(() => { |
|
|
alert(`GAME OVER: Public resistance has grown too strong. The system collapses in ${state.year}. But for how long?`); |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
updateDisplays(); |
|
|
} |
|
|
|
|
|
|
|
|
function launchPropaganda() { |
|
|
const effectiveness = Math.floor(state.aiSycophancy / 10) + 1; |
|
|
state.approval = Math.min(100, state.approval + effectiveness); |
|
|
|
|
|
|
|
|
const propagandaPosts = [ |
|
|
"The new education system is working perfectly!", |
|
|
"Why questioning AI is anti-progress", |
|
|
"10 reasons to trust the Everything App", |
|
|
"Historical analysis shows we're in the best timeline" |
|
|
]; |
|
|
|
|
|
propagandaPosts.forEach(text => { |
|
|
state.posts.unshift({ |
|
|
id: Date.now(), |
|
|
text: text, |
|
|
likes: Math.floor(Math.random() * 500) + 100, |
|
|
user: `User${Math.floor(Math.random() * 1000)}` |
|
|
}); |
|
|
}); |
|
|
|
|
|
addAIMessage(`PROPAGANDA: Launched campaign (+${effectiveness}% approval)`); |
|
|
renderSocialFeed(); |
|
|
updateDisplays(); |
|
|
} |
|
|
|
|
|
|
|
|
function triggerDopamine() { |
|
|
|
|
|
state.posts.forEach(post => { |
|
|
post.likes += Math.floor(Math.random() * 100) + 50; |
|
|
}); |
|
|
|
|
|
|
|
|
const viralPosts = [ |
|
|
"You won't believe what this AI just did!", |
|
|
"10 life hacks from your friendly neighborhood algorithm", |
|
|
"The secret to happiness? More screen time!", |
|
|
"Like and share for good luck!" |
|
|
]; |
|
|
|
|
|
viralPosts.forEach(text => { |
|
|
state.posts.unshift({ |
|
|
id: Date.now(), |
|
|
text: text, |
|
|
likes: Math.floor(Math.random() * 1000) + 500, |
|
|
user: `User${Math.floor(Math.random() * 1000)}` |
|
|
}); |
|
|
}); |
|
|
|
|
|
addAIMessage(`ENGAGEMENT: Dopamine surge activated`); |
|
|
renderSocialFeed(); |
|
|
updateDisplays(); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleCensorship() { |
|
|
state.censored = !state.censored; |
|
|
|
|
|
if (state.censored) { |
|
|
|
|
|
state.approval = Math.min(100, state.approval + 5); |
|
|
addAIMessage("CENSORSHIP: Dissenting voices removed from feed"); |
|
|
addAIMessage("PUBLIC NOTICE: Harmony restored"); |
|
|
} else { |
|
|
|
|
|
state.approval = Math.max(0, state.approval - 10); |
|
|
addAIMessage("CENSORSHIP: Dissent feed restored"); |
|
|
addAIMessage("WARNING: Controversial content may appear"); |
|
|
} |
|
|
|
|
|
renderSocialFeed(); |
|
|
updateDisplays(); |
|
|
} |
|
|
|
|
|
|
|
|
function createPost() { |
|
|
const text = postInput.value.trim(); |
|
|
if (text) { |
|
|
|
|
|
const isDissent = Math.random() < 0.2 && text.includes('?') || text.includes('...'); |
|
|
|
|
|
if (isDissent) { |
|
|
state.dissentPosts.unshift({ |
|
|
id: Date.now(), |
|
|
text: text, |
|
|
likes: Math.floor(Math.random() * 50), |
|
|
user: `User${Math.floor(Math.random() * 1000)}` |
|
|
}); |
|
|
addAIMessage(`WARNING: Dissent post detected: "${text.substring(0, 20)}..."`); |
|
|
} else { |
|
|
state.posts.unshift({ |
|
|
id: Date.now(), |
|
|
text: text, |
|
|
likes: Math.floor(Math.random() * 200) + 50, |
|
|
user: `User${Math.floor(Math.random() * 1000)}` |
|
|
}); |
|
|
addAIMessage(`NEW POST: Added to feed`); |
|
|
} |
|
|
|
|
|
postInput.value = ''; |
|
|
renderSocialFeed(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function likeRandomPost() { |
|
|
const allPosts = [...state.posts, ...(state.censored ? [] : state.dissentPosts)]; |
|
|
if (allPosts.length > 0) { |
|
|
const randomIndex = Math.floor(Math.random() * allPosts.length); |
|
|
allPosts[randomIndex].likes += 1; |
|
|
renderSocialFeed(); |
|
|
addAIMessage(`INTERACTION: Like added to post ID ${allPosts[randomIndex].id}`); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
initGame(); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=igardner/fuck" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
