USERNAME: admin
Password: password
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Code Repository Q&A App</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f9;
display: flex;
flex-direction: column;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
header img {
width: 50px;
vertical-align: middle;
}
header h1 {
display: inline;
margin-left: 10px;
}
main {
flex: 1;
display: flex;
padding: 20px;
gap: 20px;
}
.left-panel, .right-panel {
padding: 10px;
box-sizing: border-box;
}
.left-panel {
width: 30%;
background: #fff;
border-right: 1px solid #ddd;
display: flex;
flex-direction: column;
gap: 20px;
}
.right-panel {
width: 70%;
}
form {
margin-bottom: 20px;
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 5px;
}
input, textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ddd;
}
button {
padding: 10px 15px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
#code-container {
display: flex;
flex-direction: column;
}
.code-snippet {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.code-snippet h3 {
margin: 0;
}
.code-snippet pre {
background: #f5f5f5;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
.code-snippet .actions {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.code-snippet .actions button {
background: #007bff;
color: #fff;
}
.code-snippet .actions button:hover {
background: #0056b3;
}
.comments-container, .questions-container {
margin-top: 20px;
}
.comment, .question, .answer {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.comment h4, .question h4, .answer h4 {
margin: 0;
}
.comment-form, .question-form, .answer-form {
margin-top: 10px;
}
.comment-form textarea, .question-form textarea, .answer-form textarea {
height: 60px;
}
.search-container {
margin-bottom: 20px;
}
.search-container input {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
}
#upload-file {
margin-bottom: 20px;
}
#login, #home, #search, #code-list {
display: none;
}
</style>
</head>
<body>
<header>
<img src=”https://via.placeholder.com/50″ alt=”Logo”> <!– Placeholder logo –>
<h1>Code Repository Q&A <span role=”img” aria-label=”rocket”>🚀</span></h1>
</header>
<main>
<div class=”left-panel”>
<section id=”upload-file”>
<h2>Upload File</h2>
<label for=”file-upload”>Choose File:</label>
<input type=”file” id=”file-upload”>
</section>
<section id=”submit-code”>
<h2>Submit Code</h2>
<form id=”submit-code-form”>
<label for=”code-title”>Title:</label>
<input type=”text” id=”code-title” required>
<label for=”code-snippet”>Code:</label>
<textarea id=”code-snippet” required></textarea>
<button type=”submit”>Submit Code</button>
</form>
</section>
</div>
<div class=”right-panel”>
<section id=”login”>
<form id=”login-form”>
<h2>Login</h2>
<label for=”login-username”>Username:</label>
<input type=”text” id=”login-username” required>
<label for=”login-password”>Password:</label>
<input type=”password” id=”login-password” required>
<button type=”submit”>Login</button>
</form>
</section>
<section id=”home”>
<h2>Welcome to Code Repository Q&A <span role=”img” aria-label=”books”>📚</span></h2>
<p>View, discuss, and rate code snippets.</p>
</section>
<section id=”search”>
<h2>Search Code</h2>
<div class=”search-container”>
<input type=”text” id=”search-bar” placeholder=”Search code snippets…”>
</div>
</section>
<section id=”code-list”>
<h2>Code Snippets <span role=”img” aria-label=”file folder”>📁</span></h2>
<div id=”code-container”>
<!– Code snippets will be dynamically inserted here –>
</div>
</section>
</div>
</main>
<script>
document.addEventListener(‘DOMContentLoaded’, () => {
const loginForm = document.getElementById(‘login-form’);
const submitCodeForm = document.getElementById(‘submit-code-form’);
const codeContainer = document.getElementById(‘code-container’);
const searchBar = document.getElementById(‘search-bar’);
const homeSection = document.getElementById(‘home’);
const submitCodeSection = document.getElementById(‘submit-code’);
const searchSection = document.getElementById(‘search’);
const codeListSection = document.getElementById(‘code-list’);
const fileUpload = document.getElementById(‘file-upload’);
const loginSection = document.getElementById(‘login’);
let codeSnippets = [];
let currentUser = ”;
// Show login form initially
loginSection.style.display = ‘block’;
loginForm.addEventListener(‘submit’, (e) => {
e.preventDefault();
const username = document.getElementById(‘login-username’).value;
const password = document.getElementById(‘login-password’).value;
// Simulated authentication (replace with real authentication logic)
if (username && password) {
currentUser = username;
loginSection.style.display = ‘none’;
homeSection.style.display = ‘block’;
submitCodeSection.style.display = ‘block’;
searchSection.style.display = ‘block’;
codeListSection.style.display = ‘block’;
displayCodeSnippets();
} else {
alert(‘Invalid login credentials’);
}
});
submitCodeForm.addEventListener(‘submit’, (e) => {
e.preventDefault();
const title = document.getElementById(‘code-title’).value;
const code = document.getElementById(‘code-snippet’).value;
codeSnippets.push({ title, code, comments: [], questions: [] });
displayCodeSnippets();
submitCodeForm.reset();
});
fileUpload.addEventListener(‘change’, (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
const fileContent = event.target.result;
const title = file.name;
codeSnippets.push({ title, code: fileContent, comments: [], questions: [] });
displayCodeSnippets();
};
reader.readAsText(file);
}
});
function displayCodeSnippets() {
codeContainer.innerHTML = ”;
const filteredSnippets = codeSnippets.filter(snippet => snippet.title.toLowerCase().includes(searchBar.value.toLowerCase()));
filteredSnippets.forEach((snippet, index) => {
const codeSnippetDiv = document.createElement(‘div’);
codeSnippetDiv.className = ‘code-snippet’;
codeSnippetDiv.innerHTML = `
<h3>${snippet.title} <span role=”img” aria-label=”file”>📄</span></h3>
<pre><code>${snippet.code}</code></pre>
<div class=”actions”>
<button class=”download-button” data-index=”${index}”>⬇️ Download</button>
<button class=”delete-button” data-index=”${index}”>🗑️ Delete</button>
</div>
<div class=”comments-container” id=”comments-${index}”>
${snippet.comments.map(comment => `
<div class=”comment”>
<h4>${comment.user}</h4>
<p>${comment.text}</p>
</div>
`).join(”)}
<form class=”comment-form” data-index=”${index}”>
<label for=”comment-text-${index}”>Add Comment:</label>
<textarea id=”comment-text-${index}” required></textarea>
<button type=”submit”>Submit Comment</button>
</form>
</div>
<div class=”questions-container” id=”questions-${index}”>
${snippet.questions.map(question => `
<div class=”question”>
<h4>${question.user} asked:</h4>
<p>${question.text}</p>
${question.answers.map(answer => `
<div class=”answer”>
<h4>${answer.user} answered:</h4>
<p>${answer.text}</p>
</div>
`).join(”)}
${currentUser ? `
<form class=”answer-form” data-index=”${index}” data-question=”${question.id}”>
<label for=”answer-text-${index}-${question.id}”>Add Answer:</label>
<textarea id=”answer-text-${index}-${question.id}” required></textarea>
<button type=”submit”>Submit Answer</button>
</form>
` : ”}
</div>
`).join(”)}
${currentUser ? `
<form class=”question-form” data-index=”${index}”>
<label for=”question-text-${index}”>Ask a Question:</label>
<textarea id=”question-text-${index}” required></textarea>
<button type=”submit”>Submit Question</button>
</form>
` : ”}
</div>
`;
codeContainer.appendChild(codeSnippetDiv);
});
}
searchBar.addEventListener(‘input’, displayCodeSnippets);
codeContainer.addEventListener(‘click’, (e) => {
if (e.target.classList.contains(‘download-button’)) {
const index = e.target.getAttribute(‘data-index’);
const snippet = codeSnippets[index];
const blob = new Blob([snippet.code], { type: ‘text/plain’ });
const url = URL.createObjectURL(blob);
const a = document.createElement(‘a’);
a.href = url;
a.download = snippet.title;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
if (e.target.classList.contains(‘delete-button’)) {
const index = e.target.getAttribute(‘data-index’);
codeSnippets.splice(index, 1);
displayCodeSnippets();
}
});
codeContainer.addEventListener(‘submit’, (e) => {
if (e.target.classList.contains(‘comment-form’)) {
e.preventDefault();
const index = e.target.getAttribute(‘data-index’);
const commentText = e.target.querySelector(‘textarea’).value;
if (commentText && currentUser) {
codeSnippets[index].comments.push({ user: currentUser, text: commentText });
displayCodeSnippets();
e.target.reset();
} else if (!currentUser) {
alert(‘Please log in to comment.’);
}
}
if (e.target.classList.contains(‘question-form’)) {
e.preventDefault();
const index = e.target.getAttribute(‘data-index’);
const questionText = e.target.querySelector(‘textarea’).value;
if (questionText && currentUser) {
const questionId = Date.now();
codeSnippets[index].questions.push({ id: questionId, user: currentUser, text: questionText, answers: [] });
displayCodeSnippets();
e.target.reset();
} else if (!currentUser) {
alert(‘Please log in to ask questions.’);
}
}
if (e.target.classList.contains(‘answer-form’)) {
e.preventDefault();
const index = e.target.getAttribute(‘data-index’);
const questionId = e.target.getAttribute(‘data-question’);
const answerText = e.target.querySelector(‘textarea’).value;
if (answerText && currentUser) {
const question = codeSnippets[index].questions.find(q => q.id == questionId);
if (question) {
question.answers.push({ user: currentUser, text: answerText });
displayCodeSnippets();
e.target.reset();
}
} else if (!currentUser) {
alert(‘Please log in to answer questions.’);
}
}
});
});
</script>
</body>
</html>