<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >GitHub-Like Code Repository System</ title >
< style >
body {
font-family : Arial , sans-serif ;
background-color : #f4f4f4 ;
margin : 0 ;
padding : 0 ;
}
.header {
background-color : #333 ;
color : #fff ;
padding : 20 px ;
text-align : center ;
}
.container {
max-width : 900 px ;
margin : 20 px auto ;
padding : 20 px ;
background-color : #fff ;
border-radius : 10 px ;
box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , 0.1 );
}
form input , form textarea , form button {
width : 100 % ;
padding : 10 px ;
margin-bottom : 10 px ;
}
form button {
background-color : #333 ;
color : white ;
border : none ;
border-radius : 3 px ;
}
.repo-list {
margin-top : 20 px ;
}
.repo {
padding : 15 px ;
background-color : #e8e8e8 ;
margin-bottom : 10 px ;
border-radius : 5 px ;
}
.repo h3 {
margin : 0 ;
}
.repo p {
margin : 5 px 0 ;
}
.repo .view-files , .repo .download-repo {
background-color : #333 ;
color : white ;
padding : 5 px 10 px ;
border : none ;
border-radius : 3 px ;
cursor : pointer ;
margin-right : 5 px ;
}
.hidden {
display : none ;
}
#loginSection , #repoSection {
display : none ;
}
#authSection input , #authSection button {
margin : 10 px 0 ;
}
.commit-history {
list-style-type : none ;
padding : 0 ;
}
.commit {
padding : 10 px ;
background-color : #f9f9f9 ;
border-left : 3 px solid #333 ;
margin-bottom : 10 px ;
}
</ style >
</ head >
< body >
< div class = "header" >
< h1 >GitHub-Like Code Repository System</ h1 >
</ div >
< div class = "container" id = "authSection" >
< h2 >Sign In or Register</ h2 >
< form id = "authForm" >
< input type = "text" id = "username" placeholder = "Username" required >
< button type = "submit" >Sign In / Register</ button >
</ form >
</ div >
< div class = "container" id = "repoSection" >
< h2 >Create a New Repository</ h2 >
< form id = "repoForm" >
< input type = "text" id = "repoName" placeholder = "Repository Name" required >
< textarea id = "repoDescription" placeholder = "Repository Description" rows = "3" required ></ textarea >
< button type = "submit" >Create Repository</ button >
</ form >
< h2 >Your Repositories</ h2 >
< input type = "text" id = "searchRepo" placeholder = "Search repositories" >
< div class = "repo-list" id = "repoList" ></ div >
</ div >
< div class = "container" id = "repoDetailsSection" style = "display: none;" >
< h2 id = "repoDetailsTitle" ></ h2 >
< p id = "repoDetailsDescription" ></ p >
< h3 >Commit Changes</ h3 >
< form id = "commitForm" >
< input type = "text" id = "commitMessage" placeholder = "Commit Message" required >
< button type = "submit" >Commit</ button >
</ form >
< h3 >Commit History</ h3 >
< ul class = "commit-history" id = "commitHistory" ></ ul >
< button id = "backToRepoList" >Back to Repositories</ button >
</ div >
< script >
let repositories = JSON . parse (localStorage. getItem ( 'repositories' )) || {};
let currentUser = null ;
let currentRepoIndex = null ;
// Handle user authentication
document. getElementById ( 'authForm' ). addEventListener ( 'submit' , function ( event ) {
event. preventDefault ();
const username = document. getElementById ( 'username' ).value;
currentUser = username;
// If user doesn't exist, create an empty array of repositories for the user
if ( ! repositories[username]) {
repositories[username] = [];
}
localStorage. setItem ( 'repositories' , JSON . stringify (repositories));
document. getElementById ( 'authSection' ).style.display = 'none' ;
document. getElementById ( 'repoSection' ).style.display = 'block' ;
displayRepositories ();
});
// Handle repository creation
document. getElementById ( 'repoForm' ). addEventListener ( 'submit' , function ( event ) {
event. preventDefault ();
const repoName = document. getElementById ( 'repoName' ).value;
const repoDescription = document. getElementById ( 'repoDescription' ).value;
if (repoName && repoDescription) {
const newRepo = { name: repoName, description: repoDescription, commits: [] };
repositories[currentUser]. push (newRepo);
localStorage. setItem ( 'repositories' , JSON . stringify (repositories));
displayRepositories ();
document. getElementById ( 'repoForm' ). reset ();
}
});
// Display repositories
function displayRepositories () {
const repoList = document. getElementById ( 'repoList' );
repoList.innerHTML = '' ;
const searchQuery = document. getElementById ( 'searchRepo' ).value. toLowerCase ();
repositories[currentUser]. forEach (( repo , index ) => {
if (repo.name. toLowerCase (). includes (searchQuery)) {
const repoDiv = document. createElement ( 'div' );
repoDiv.classList. add ( 'repo' );
repoDiv.innerHTML = `
<h3>${ repo . name }</h3>
<p>${ repo . description }</p>
<button onclick="viewRepoDetails(${ index })">View Details</button>
` ;
repoList. appendChild (repoDiv);
}
});
}
// View repository details (like commits, branches, etc.)
function viewRepoDetails ( repoIndex ) {
currentRepoIndex = repoIndex;
const repo = repositories[currentUser][repoIndex];
document. getElementById ( 'repoDetailsTitle' ).innerText = repo.name;
document. getElementById ( 'repoDetailsDescription' ).innerText = repo.description;
document. getElementById ( 'repoDetailsSection' ).style.display = 'block' ;
document. getElementById ( 'repoSection' ).style.display = 'none' ;
displayCommits ();
}
// Handle commit submission
document. getElementById ( 'commitForm' ). addEventListener ( 'submit' , function ( event ) {
event. preventDefault ();
const commitMessage = document. getElementById ( 'commitMessage' ).value;
if (commitMessage) {
repositories[currentUser][currentRepoIndex].commits. push ({ message: commitMessage, date: new Date () });
localStorage. setItem ( 'repositories' , JSON . stringify (repositories));
displayCommits ();
document. getElementById ( 'commitForm' ). reset ();
}
});
// Display commit history
function displayCommits () {
const commitHistory = document. getElementById ( 'commitHistory' );
commitHistory.innerHTML = '' ;
const commits = repositories[currentUser][currentRepoIndex].commits;
commits. forEach ( commit => {
const commitItem = document. createElement ( 'li' );
commitItem.classList. add ( 'commit' );
commitItem.innerHTML = `<strong>${ commit . message }</strong> - ${ new Date ( commit . date ). toLocaleString () }` ;
commitHistory. appendChild (commitItem);
});
}
// Back to repository list
document. getElementById ( 'backToRepoList' ). addEventListener ( 'click' , function () {
document. getElementById ( 'repoDetailsSection' ).style.display = 'none' ;
document. getElementById ( 'repoSection' ).style.display = 'block' ;
});
// Initial call to display repositories
if (currentUser) {
displayRepositories ();
}
</ script >
</ body >
</ html >
HTML