<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>MindEase Forum</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom Tailwind Theme -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
calmBlue: "#A7C5EB",
softPurple: "#D9D7F1",
gentlePink: "#FEE4E1",
deepIndigo: "#5661B3",
fadedText: "#4B5563"
},
fontFamily: {
body: ['"Segoe UI"', "sans-serif"]
}
}
}
};
</script>
<style>
body {
background: linear-gradient(120deg, #d9d7f1, #a7c5eb, #fee4e1);
background-size: 600% 600%;
animation: gradientShift 20s ease infinite;
font-family: 'Segoe UI', sans-serif;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glass {
backdrop-filter: blur(12px);
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body class="text-gray-800 min-h-screen">
<!-- Navbar -->
<nav class="bg-white/70 backdrop-blur-md shadow-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-bold text-deepIndigo flex items-center">
MindEase</div>
<div class="space-x-6 hidden sm:flex">
<a href="index.html" class="text-gray-700 hover:text-deepIndigo font-medium">Home</a>
<a href="forum.html" class="text-deepIndigo font-semibold underline">Forum</a>
<a href="resources.html" class="text-gray-700 hover:text-deepIndigo font-medium">Resources</a>
<a href="login.html" class="text-gray-700 hover:text-deepIndigo font-medium">Login</a>
</div>
</div>
</nav>
<!-- Forum Content -->
<main class="max-w-4xl mx-auto px-4 py-10">
<h1 class="text-3xl font-bold text-center text-deepIndigo mb-8">
Community Forum – Share. Support. Grow.</h1>
<!-- Create Post -->
<section class="glass rounded-xl p-6 mb-10 shadow-md">
<h2 class="text-xl font-semibold text-deepIndigo mb-4">Start a Conversation</h2>
<input id="title" type="text" placeholder="Title..." class="w-full mb-3 p-3 border rounded-md focus:ring-2 focus:ring-calmBlue" />
<textarea id="content" rows="4" placeholder="What’s on your mind?" class="w-full mb-3 p-3 border rounded-md focus:ring-2 focus:ring-calmBlue"></textarea>
<select id="category" class="w-full mb-4 p-3 border rounded-md focus:ring-2 focus:ring-calmBlue">
<option value="">Select Category</option>
<option value="anxiety">Anxiety</option>
<option value="depression">Depression</option>
<option value="exam-pressure">Exam Pressure</option>
</select>
<button onclick="createPost()" class="bg-deepIndigo text-white py-2 px-6 rounded-md hover:bg-indigo-700 transition">
Post
</button>
</section>
<!-- Forum Posts -->
<section id="posts" class="space-y-6"></section>
</main>
<!-- Footer -->
<footer class="bg-deepIndigo text-white text-center py-6 mt-10">
<p>© 2025 MindEase — A safe space for all.</p>
<p class="text-sm">Need help? Call <strong>988</strong> or <a href="#" class="underline">see local resources</a>.</p>
</footer>
<!-- Forum Script -->
<script>
const posts = [
{
title: "I feel anxious every Monday
",content: "Every time the week starts, I get this overwhelming stress. Any ways to ease into the week?",
category: "anxiety",
upvotes: 4,
replies: [
{ content: "Try planning a fun activity Monday evening to look forward to!" }
]
},
{
title: "Exams stressing me out
",content: "No matter how much I prepare, I feel pressure. Tips?",
category: "exam-pressure",
upvotes: 6,
replies: []
}
];
function renderPosts() {
const postsContainer = document.getElementById("posts");
postsContainer.innerHTML = "";
posts.forEach((post, index) => {
const postDiv = document.createElement("div");
postDiv.className = "glass p-6 rounded-xl shadow";
postDiv.innerHTML = `
<h3 class="text-xl font-semibold text-deepIndigo">${post.title}</h3>
<p class="text-gray-700 mt-2">${post.content}</p>
<p class="text-sm text-gray-500 mt-1">#${post.category}</p>
<div class="mt-3 flex items-center gap-4">
<button onclick="upvote(${index})" class="text-blue-600 hover:underline">
Upvote (${post.upvotes})</button><span>${post.replies.length} Replies</span>
</div>
<div class="mt-4 ml-4 space-y-2">
${post.replies.map(r => `<p class="text-fadedText">↳ ${r.content}</p>`).join("")}
</div>
<div class="mt-3 flex">
<input id="reply-${index}" type="text" placeholder="Write a reply..." class="flex-1 p-2 border rounded-l-md focus:ring-2 focus:ring-calmBlue" />
<button onclick="addReply(${index})" class="bg-calmBlue text-white px-4 rounded-r-md hover:bg-blue-400">Reply</button>
</div>
`;
postsContainer.appendChild(postDiv);
});
}
function createPost() {
const title = document.getElementById("title").value.trim();
const content = document.getElementById("content").value.trim();
const category = document.getElementById("category").value;
if (!title || !content || !category) {
alert("Please fill out all fields.");
return;
}
posts.unshift({
title,
content,
category,
upvotes: 0,
replies: []
});
document.getElementById("title").value = "";
document.getElementById("content").value = "";
document.getElementById("category").value = "";
renderPosts();
}
function upvote(index) {
posts[index].upvotes++;
renderPosts();
}
function addReply(index) {
const input = document.getElementById(`reply-${index}`);
const reply = input.value.trim();
if (reply) {
posts[index].replies.push({ content: reply });
input.value = "";
renderPosts();
}
}
// Initial render
renderPosts();
</script>
</body>
</html>