<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open BCA – Academic & Career Vlog</title>
<style>
body {
background-color: #1e1e1e;
color: #ffffff;
font-family: 'Courier New', Courier, monospace;
margin: 0;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 32px;
margin-bottom: 10px;
}
p {
text-align: center;
font-style: italic;
margin-bottom: 20px;
}
hr {
border: 1px solid #3d3d3d;
margin: 20px 0;
}
ul {
padding-left: 20px;
margin-bottom: 20px;
}
li {
margin-bottom: 10px;
}
input, textarea {
width: 100%;
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #3d3d3d;
color: #ffffff;
font-family: inherit;
}
button {
background-color: #0088cc;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-family: inherit;
transition: background-color 0.3s;
}
button:hover {
background-color: #006699;
}
.special-post {
background-color: #2d2d2d;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.special-post h3 {
color: #66d9ef;
margin-top: 0;
}
#postList {
margin-top: 20px;
}
.post {
background-color: #2d2d2d;
padding: 15px;
border-radius: 5px;
margin-bottom: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.post h4 {
color: #66d9ef;
margin-top: 0;
}
@media (max-width: 768px) {
body {
padding: 15px;
}
input, textarea {
padding: 8px;
}
button {
padding: 8px 16px;
font-size: 14px;
}
}
</style>
</head>
<body>
<header>
<h1>📘 Open BCA</h1>
<p>Strictly for academic and career-related discussions</p>
<hr />
</header>
<main>
<section>
<h2>📌 Community Guidelines</h2>
<ul>
<li>Keep messages clear, concise, and on-topic</li>
<li>Share only verified resources — avoid spreading misinformation</li>
<li>Maintain a professional tone – avoid immature or off-topic behavior</li>
<li>No Homework Dumping – Ask to understand, not for ready-made answers</li>
<li>Stay Solution-Oriented – Share what you’ve tried so far before asking for help</li>
</ul>
<hr />
</section>
<section>
<h2>📋 Quick Links</h2>
<div class="special-post">
<h3>📚 Welcome to Open BCA</h3>
<p>Use this space for sharing academic ideas, career paths, learning plans and doubt solving. Keep it clean, real and helpful!</p>
<button onclick="alert('Welcome to our academic community!')">Read More</button>
</div>
<div class="special-post">
<h3>🔍 Internship Resources for 2nd Year BCA</h3>
<p>Look into platforms like Internshala, LetsIntern, and even open-source contributions on GitHub. If you're interested in web dev or Python projects, start early!</p>
<button onclick="alert('Internship resources: Internshala, LetsIntern, GitHub')">View Resources</button>
</div>
<hr />
</section>
<section>
<h2>📋 Posts</h2>
<div id="postList"></div>
<hr />
</section>
<section>
<h3>Add a New Post</h3>
<p>Use this to log ideas, topics, updates or questions</p>
<input type="text" id="titleInput" placeholder="Post Title" />
<textarea id="contentInput" placeholder="Write your post..." rows="4"></textarea>
<button onclick="addPost()">Post</button>
</section>
</main>
<script>
const posts = [];
function renderPosts() {
const postList = document.getElementById('postList');
postList.innerHTML = '';
if (posts.length === 0) {
postList.innerHTML = '<p>No posts yet. Be the first to post!</p>';
return;
}
posts.forEach((post, index) => {
const div = document.createElement('div');
div.className = 'post';
div.innerHTML = `
<h4>${post.title}</h4>
<p>${post.content}</p>
<button onclick="deletePost(${index})">Delete</button>
`;
postList.appendChild(div);
});
}
function addPost() {
const title = document.getElementById('titleInput').value.trim();
const content = document.getElementById('contentInput').value.trim();
if (!title || !content) {
alert("Please fill both title and content.");
return;
}
posts.unshift({ title, content });
document.getElementById('titleInput').value = '';
document.getElementById('contentInput').value = '';
renderPosts();
}
function deletePost(index) {
if (confirm("Are you sure you want to delete this post?")) {
posts.splice(index, 1);
renderPosts();
}
}
renderPosts();
</script>
</body>
</html>