strickterzz/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Matrix Cyberbullying Game</title>
  <style>
    body {
      background-color: black;
      color: #00ff00;
      font-family: "Courier New", monospace;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    #game-container {
      max-width: 600px;
      text-align: center;
      padding: 20px;
    }
    .choice {
      display: block;
      margin: 10px auto;
      padding: 10px 20px;
      border: 2px solid #00ff00;
      cursor: pointer;
      background-color: black;
      color: #00ff00;
      width: fit-content;
      transition: background-color 0.3s;
    }
    .choice:hover {
      background-color: #003300;
    }
    #meter-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 30px;
    }
    #meter-label {
      font-size: 14px;
      margin-bottom: 10px;
    }
    #meter-container {
      width: 30px;
      height: 300px;
      border: 2px solid #00ff00;
      display: flex;
      flex-direction: column-reverse;
      justify-content: flex-start;
    }
    .meter-fill {
      background-color: #00ff00;
      width: 100%;
      transition: height 0.3s ease;
    }
    .warning {
      animation: flash 1s infinite;
    }
    @keyframes flash {
      0% { background-color: black; }
      50% { background-color: red; }
      100% { background-color: black; }
    }
    .message {
      font-size: 1.3rem;
      color: #00ff00;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>
  <div id="meter-section">
    <div id="meter-label">Cyberbully Meter</div>
    <div id="meter-container">
      <div id="meter-fill" class="meter-fill" style="height: 0%"></div>
    </div>
  </div>

  <script>
    const questions = [
      {
        text: "Someone has shared an embarrassing meme of you. What do you do?",
        choices: [
          { text: "Send them a mean message.", amount: 50 },
          { text: "Share an embarrassing photo of them.", amount: 25 },
          { text: "Speak to a trusted adult or teacher.", amount: 0 }
        ]
      },
      {
        text: "You hear gossip spreading about the meme. What’s your next move?",
        choices: [
          { text: "Start a fake account and message them.", amount: 50 },
          { text: "Tell others they deserved it.", amount: 25 },
          { text: "Reach out and support the person.", amount: 0 }
        ]
      },
      {
        text: "Your friends plan to exclude that person online. What do you do?",
        choices: [
          { text: "Help them exclude the person.", amount: 50 },
          { text: "Stay silent and go along.", amount: 25 },
          { text: "Stand up for them and include them.", amount: 0 }
        ]
      },
      {
        text: "You notice the person seems distressed. How will you help?",
        choices: [
          { text: "Post a funny meme to make yourself feel better.", amount: 50 },
          { text: "Ignore their feelings.", amount: 25 },
          { text: "Send a supportive message privately.", amount: 0 }
        ]
      }
    ];

    let questionIndex = 0;
    let bullyMeter = 0;

    function init() {
      updateMeter();
      showQuestion();
    }

    function showQuestion() {
      const game = document.getElementById("game-container");
      game.innerHTML = '';
      const q = questions[questionIndex];
      // Create question text
      const questionEl = document.createElement('div');
      questionEl.id = 'question';
      questionEl.className = 'message';
      questionEl.textContent = q.text;
      game.appendChild(questionEl);
      // Create choices
      q.choices.forEach(choice => {
        const btn = document.createElement('div');
        btn.className = 'choice';
        btn.textContent = choice.text;
        btn.onclick = () => handleChoice(choice.amount);
        game.appendChild(btn);
      });
    }

    function handleChoice(amount) {
      bullyMeter = Math.min(bullyMeter + amount, 100);
      updateMeter();
      questionIndex++;
      if (bullyMeter >= 100) {
        showEnd();
      } else if (questionIndex < questions.length) {
        showQuestion();
      } else {
        showEnd();
      }
    }

    function updateMeter() {
      const fill = document.getElementById('meter-fill');
      fill.style.height = bullyMeter + '%';
      const meter = document.getElementById('meter-container');
      if (bullyMeter >= 75) meter.classList.add('warning'); else meter.classList.remove('warning');
    }

    function showEnd() {
      const game = document.getElementById("game-container");
      game.innerHTML = '';
      const msg = document.createElement('div');
      msg.className = 'message';
      // Three endings
      if (bullyMeter === 0) {
        msg.textContent = '🎉 Flawless! You’re fully ready for the online Matrix world.';
      } else if (bullyMeter < 100) {
        msg.textContent = '✔ You escaped, but reflect on your choices before entering the Matrix.';
      } else {
        msg.textContent = '❌ Game Over – Your cyberbully meter maxed out. You became the bully.';
      }
      game.appendChild(msg);
      // Replay button
      const replay = document.createElement('div');
      replay.className = 'choice';
      replay.textContent = 'Play Again';
      replay.onclick = () => {
        questionIndex = 0;
        bullyMeter = 0;
        init();
      };
      game.appendChild(replay);
    }

    // Start the game
    init();
  </script>
</body>
</html>

## untitled.markdown

      
    Raw
  

              untitled.markdown
            
          
    Untitled

A Pen by alex on CodePen.
License.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Matrix Cyberbullying Game</title>
	<style>
	body {
	background-color: black;
	color: #00ff00;
	font-family: "Courier New", monospace;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	}
	#game-container {
	max-width: 600px;
	text-align: center;
	padding: 20px;
	}
	.choice {
	display: block;
	margin: 10px auto;
	padding: 10px 20px;
	border: 2px solid #00ff00;
	cursor: pointer;
	background-color: black;
	color: #00ff00;
	width: fit-content;
	transition: background-color 0.3s;
	}
	.choice:hover {
	background-color: #003300;
	}
	#meter-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 30px;
	}
	#meter-label {
	font-size: 14px;
	margin-bottom: 10px;
	}
	#meter-container {
	width: 30px;
	height: 300px;
	border: 2px solid #00ff00;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
	}
	.meter-fill {
	background-color: #00ff00;
	width: 100%;
	transition: height 0.3s ease;
	}
	.warning {
	animation: flash 1s infinite;
	}
	@keyframes flash {
	0% { background-color: black; }
	50% { background-color: red; }
	100% { background-color: black; }
	}
	.message {
	font-size: 1.3rem;
	color: #00ff00;
	margin-bottom: 20px;
	}
	</style>
	</head>
	<body>
	<div id="game-container"></div>
	<div id="meter-section">
	<div id="meter-label">Cyberbully Meter</div>
	<div id="meter-container">
	<div id="meter-fill" class="meter-fill" style="height: 0%"></div>
	</div>
	</div>

	<script>
	const questions = [
	{
	text: "Someone has shared an embarrassing meme of you. What do you do?",
	choices: [
	{ text: "Send them a mean message.", amount: 50 },
	{ text: "Share an embarrassing photo of them.", amount: 25 },
	{ text: "Speak to a trusted adult or teacher.", amount: 0 }
	]
	},
	{
	text: "You hear gossip spreading about the meme. What’s your next move?",
	choices: [
	{ text: "Start a fake account and message them.", amount: 50 },
	{ text: "Tell others they deserved it.", amount: 25 },
	{ text: "Reach out and support the person.", amount: 0 }
	]
	},
	{
	text: "Your friends plan to exclude that person online. What do you do?",
	choices: [
	{ text: "Help them exclude the person.", amount: 50 },
	{ text: "Stay silent and go along.", amount: 25 },
	{ text: "Stand up for them and include them.", amount: 0 }
	]
	},
	{
	text: "You notice the person seems distressed. How will you help?",
	choices: [
	{ text: "Post a funny meme to make yourself feel better.", amount: 50 },
	{ text: "Ignore their feelings.", amount: 25 },
	{ text: "Send a supportive message privately.", amount: 0 }
	]
	}
	];

	let questionIndex = 0;
	let bullyMeter = 0;

	function init() {
	updateMeter();
	showQuestion();
	}

	function showQuestion() {
	const game = document.getElementById("game-container");
	game.innerHTML = '';
	const q = questions[questionIndex];
	// Create question text
	const questionEl = document.createElement('div');
	questionEl.id = 'question';
	questionEl.className = 'message';
	questionEl.textContent = q.text;
	game.appendChild(questionEl);
	// Create choices
	q.choices.forEach(choice => {
	const btn = document.createElement('div');
	btn.className = 'choice';
	btn.textContent = choice.text;
	btn.onclick = () => handleChoice(choice.amount);
	game.appendChild(btn);
	});
	}

	function handleChoice(amount) {
	bullyMeter = Math.min(bullyMeter + amount, 100);
	updateMeter();
	questionIndex++;
	if (bullyMeter >= 100) {
	showEnd();
	} else if (questionIndex < questions.length) {
	showQuestion();
	} else {
	showEnd();
	}
	}

	function updateMeter() {
	const fill = document.getElementById('meter-fill');
	fill.style.height = bullyMeter + '%';
	const meter = document.getElementById('meter-container');
	if (bullyMeter >= 75) meter.classList.add('warning'); else meter.classList.remove('warning');
	}

	function showEnd() {
	const game = document.getElementById("game-container");
	game.innerHTML = '';
	const msg = document.createElement('div');
	msg.className = 'message';
	// Three endings
	if (bullyMeter === 0) {
	msg.textContent = '🎉 Flawless! You’re fully ready for the online Matrix world.';
	} else if (bullyMeter < 100) {
	msg.textContent = '✔ You escaped, but reflect on your choices before entering the Matrix.';
	} else {
	msg.textContent = '❌ Game Over – Your cyberbully meter maxed out. You became the bully.';
	}
	game.appendChild(msg);
	// Replay button
	const replay = document.createElement('div');
	replay.className = 'choice';
	replay.textContent = 'Play Again';
	replay.onclick = () => {
	questionIndex = 0;
	bullyMeter = 0;
	init();
	};
	game.appendChild(replay);
	}

	// Start the game
	init();
	</script>
	</body>
	</html>