Kanchi-Dhanusha/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mind Reader Storytelling</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>🎙️ Mind Reader</h1>
  <p>Click the button and start speaking. The app will read your emotion and tell a story.</p>

  <button id="startBtn">Start Speaking</button>

  <div id="waveform" class="wave">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>

  <div id="emotion">Detected Emotion: <span id="emotionText">None</span> <span id="emoji">😐</span></div>

  <div id="story">🎬 Your story will appear here...</div>

  <div id="history">
    <h3>🕒 Story History</h3>
    <ul id="historyList"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>
<link rel="stylesheet" href="styles.css" />

## mind-reader-real-time-emotion-powered-storytelling.markdown

      
    Raw
  

              mind-reader-real-time-emotion-powered-storytelling.markdown
            
          
    "Mind Reader" – Real-Time Emotion-Powered Storytelling

A Pen by Dhanusha Kanchi on CodePen.
License.

  
## script.js
const startBtn = document.getElementById("startBtn");
const emotionText = document.getElementById("emotionText");
const emoji = document.getElementById("emoji");
const storyDiv = document.getElementById("story");
const historyList = document.getElementById("historyList");
const waveform = document.getElementById("waveform");

const emotionStories = {
  happy: "☀️ The sun smiled as she danced freely across the field of golden daisies.",
  sad: "🌧️ The raindrops whispered memories of the past down the foggy glass.",
  angry: "🌩️ Thunder rumbled in sync with his rising rage.",
  neutral: "🍃 It was a quiet afternoon, the wind gently playing with the curtains."
};

const emotionEmojis = {
  happy: "😊",
  sad: "😢",
  angry: "😠",
  neutral: "😐"
};

function detectEmotion(text) {
  const t = text.toLowerCase();
  if (t.includes("great") || t.includes("joy") || t.includes("fun") || t.includes("laugh")) return "happy";
  if (t.includes("sad") || t.includes("cry") || t.includes("alone") || t.includes("bad")) return "sad";
  if (t.includes("hate") || t.includes("mad") || t.includes("angry") || t.includes("furious")) return "angry";
  return "neutral";
}

function startRecognition() {
  if (!('webkitSpeechRecognition' in window)) {
    alert("Speech Recognition not supported. Please use Google Chrome.");
    return;
  }

  const recognition = new webkitSpeechRecognition();
  recognition.lang = "en-US";
  recognition.continuous = false;
  recognition.interimResults = false;

  waveform.style.display = "flex";
  storyDiv.textContent = "🎧 Listening for your emotion...";

  recognition.start();

  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    const emotion = detectEmotion(transcript);
    const story = emotionStories[emotion];

    emotionText.textContent = emotion;
    emoji.textContent = emotionEmojis[emotion];
    storyDiv.textContent = story;

    const li = document.createElement("li");
    li.textContent = `[${emotion.toUpperCase()}] ${story}`;
    historyList.prepend(li);
  };

  recognition.onerror = (event) => {
    storyDiv.textContent = "❌ Error occurred. Please try again.";
  };

  recognition.onend = () => {
    waveform.style.display = "none";
  };
}

startBtn.addEventListener("click", startRecognition);

## style.css
body {
  background: #121212;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  padding: 20px;
}

h1 {
  color: #00e6e6;
  margin-bottom: 10px;
}

button {
  padding: 12px 24px;
  font-size: 16px;
  background-color: #ff5e00;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background-color: #e65600;
}

#waveform {
  display: none;
  margin: 20px auto;
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.bar {
  width: 10px;
  background: #00ffc3;
  height: 20px;
  animation: wave 1s infinite ease-in-out;
}

.bar:nth-child(1) { animation-delay: 0s; }
.bar:nth-child(2) { animation-delay: 0.1s; }
.bar:nth-child(3) { animation-delay: 0.2s; }
.bar:nth-child(4) { animation-delay: 0.3s; }
.bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(2.5); }
}

#emotion {
  font-size: 20px;
  margin-top: 15px;
  color: #ffd700;
}

#story {
  margin-top: 20px;
  background-color: #1f1f1f;
  padding: 20px;
  border-radius: 10px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2rem;
  min-height: 80px;
}

#history {
  margin-top: 30px;
  background-color: #222;
  padding: 15px;
  border-radius: 10px;
  max-width: 600px;
  margin: 30px auto;
  text-align: left;
}

#history h3 {
  color: #00ccff;
}

#historyList {
  list-style: decimal;
  padding-left: 20px;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Mind Reader Storytelling</title>
	<link rel="stylesheet" href="styles.css" />
	</head>
	<body>
	<h1>🎙️ Mind Reader</h1>
	<p>Click the button and start speaking. The app will read your emotion and tell a story.</p>

	<button id="startBtn">Start Speaking</button>

	<div id="waveform" class="wave">
	<div class="bar"></div>
	<div class="bar"></div>
	<div class="bar"></div>
	<div class="bar"></div>
	<div class="bar"></div>
	</div>

	<div id="emotion">Detected Emotion: <span id="emotionText">None</span> <span id="emoji">😐</span></div>

	<div id="story">🎬 Your story will appear here...</div>

	<div id="history">
	<h3>🕒 Story History</h3>
	<ul id="historyList"></ul>
	</div>

	<script src="script.js"></script>
	</body>
	</html>
	<link rel="stylesheet" href="styles.css" />
	const startBtn = document.getElementById("startBtn");
	const emotionText = document.getElementById("emotionText");
	const emoji = document.getElementById("emoji");
	const storyDiv = document.getElementById("story");
	const historyList = document.getElementById("historyList");
	const waveform = document.getElementById("waveform");

	const emotionStories = {
	happy: "☀️ The sun smiled as she danced freely across the field of golden daisies.",
	sad: "🌧️ The raindrops whispered memories of the past down the foggy glass.",
	angry: "🌩️ Thunder rumbled in sync with his rising rage.",
	neutral: "🍃 It was a quiet afternoon, the wind gently playing with the curtains."
	};

	const emotionEmojis = {
	happy: "😊",
	sad: "😢",
	angry: "😠",
	neutral: "😐"
	};

	function detectEmotion(text) {
	const t = text.toLowerCase();
	if (t.includes("great") \|\| t.includes("joy") \|\| t.includes("fun") \|\| t.includes("laugh")) return "happy";
	if (t.includes("sad") \|\| t.includes("cry") \|\| t.includes("alone") \|\| t.includes("bad")) return "sad";
	if (t.includes("hate") \|\| t.includes("mad") \|\| t.includes("angry") \|\| t.includes("furious")) return "angry";
	return "neutral";
	}

	function startRecognition() {
	if (!('webkitSpeechRecognition' in window)) {
	alert("Speech Recognition not supported. Please use Google Chrome.");
	return;
	}

	const recognition = new webkitSpeechRecognition();
	recognition.lang = "en-US";
	recognition.continuous = false;
	recognition.interimResults = false;

	waveform.style.display = "flex";
	storyDiv.textContent = "🎧 Listening for your emotion...";

	recognition.start();

	recognition.onresult = (event) => {
	const transcript = event.results[0][0].transcript;
	const emotion = detectEmotion(transcript);
	const story = emotionStories[emotion];

	emotionText.textContent = emotion;
	emoji.textContent = emotionEmojis[emotion];
	storyDiv.textContent = story;

	const li = document.createElement("li");
	li.textContent = `[${emotion.toUpperCase()}] ${story}`;
	historyList.prepend(li);
	};

	recognition.onerror = (event) => {
	storyDiv.textContent = "❌ Error occurred. Please try again.";
	};

	recognition.onend = () => {
	waveform.style.display = "none";
	};
	}

	startBtn.addEventListener("click", startRecognition);
	body {
	background: #121212;
	color: #fff;
	font-family: 'Segoe UI', sans-serif;
	text-align: center;
	padding: 20px;
	}

	h1 {
	color: #00e6e6;
	margin-bottom: 10px;
	}

	button {
	padding: 12px 24px;
	font-size: 16px;
	background-color: #ff5e00;
	color: #fff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	}

	button:hover {
	background-color: #e65600;
	}

	#waveform {
	display: none;
	margin: 20px auto;
	width: 100px;
	height: 40px;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	}

	.bar {
	width: 10px;
	background: #00ffc3;
	height: 20px;
	animation: wave 1s infinite ease-in-out;
	}

	.bar:nth-child(1) { animation-delay: 0s; }
	.bar:nth-child(2) { animation-delay: 0.1s; }
	.bar:nth-child(3) { animation-delay: 0.2s; }
	.bar:nth-child(4) { animation-delay: 0.3s; }
	.bar:nth-child(5) { animation-delay: 0.4s; }

	@keyframes wave {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(2.5); }
	}

	#emotion {
	font-size: 20px;
	margin-top: 15px;
	color: #ffd700;
	}

	#story {
	margin-top: 20px;
	background-color: #1f1f1f;
	padding: 20px;
	border-radius: 10px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2rem;
	min-height: 80px;
	}

	#history {
	margin-top: 30px;
	background-color: #222;
	padding: 15px;
	border-radius: 10px;
	max-width: 600px;
	margin: 30px auto;
	text-align: left;
	}

	#history h3 {
	color: #00ccff;
	}

	#historyList {
	list-style: decimal;
	padding-left: 20px;
	}