diff --git a/GUI/Web Interface for Github/README.md b/GUI/Web Interface for Github/README.md
new file mode 100644
index 00000000..ee4d21ff
--- /dev/null
+++ b/GUI/Web Interface for Github/README.md
@@ -0,0 +1,26 @@
+
+# Web Interface for Github
+
+
+
+
+## Features
+
+- Interactive GUI for github
+
+- Filtering the content based on programming language
+
+- Direct Download Facility
+- More Info of Particular File
+
+
+
+
+
+## Screenshots
+
+
+
+
+
+
diff --git a/GUI/Web Interface for Github/index.html b/GUI/Web Interface for Github/index.html
new file mode 100644
index 00000000..ce89eb6a
--- /dev/null
+++ b/GUI/Web Interface for Github/index.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
+ integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
+ integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
+ crossorigin="anonymous"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <title>Document</title>
+ <style>
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@500;600;700&display=swap');
+
+ * {
+ font-family: "Poppins", sans-serif;
+ }
+
+ #formSelect {
+ width: 120px;
+ height: 30px;
+ color: white;
+ font-size: 12px;
+ }
+
+ .btn {
+ padding-top: 7px;
+ text-align: center;
+ width: 90px;
+ height: 30px;
+ font-size: 11px;
+ }
+
+ .fa {
+ margin-right: 10px;
+ }
+ </style>
+</head>
+
+<body>
+ <!-- Image and text -->
+ <nav class="navbar navbar-dark bg-dark mt-10"
+ style="display:flex;justify-content: flex-start; align-items: center;width: 80%;position: relative; bottom: 10px; left: 9%;">
+ <img src="https://avatars.githubusercontent.com/u/6811672?v=4" width="50" height="50" class="d-inline-block"
+ style="margin-left: 30px;" alt="">
+ <a class="navbar-brand" href="#" style="font-weight:900;margin-top: 20px;font-size: large;">
+
+ Github
+ </a>
+ </nav>
+ <div class="dropdown" style="position: relative; float: right; right: 11%;">
+ <select class="form-select bg-dark" aria-label="Default select example" id="formSelect">
+ </select>
+ </div>
+
+ <div>
+ <h1 class="display-4 my-4 text-center" style="font-weight: 500;">
+ All Project
+ </h1>
+ </div>
+ <div class="container" style="width: 100%;" id="card-lists">
+ <div class="row" id="panel">
+
+ </div>
+ </div>
+
+</body>
+<script>
+ var options = ["All"];
+ var request = new XMLHttpRequest();
+ request.open("GET", "https://api.github.com/users/larymak/repos", true);
+ request.onload = function () {
+ var data = JSON.parse(this.response);
+ let content = " ";
+ let content1 = " ";
+ data.forEach((p) => {
+
+ content += `
+ <div class="card" style="width: 350px; margin:10px" id="card">
+ <div class="card-body">
+ <h5 class="card-title" style="font-size:18px">${p.name}</h5>
+ <h6 class="card-subtitle mb-2 text-muted" style="font-size:15px;margin-top:5px">Id: ${p.id}</h6>
+ <p class="card-text" style="font-size:12px;">Created: ${p.created_at}</p>
+ <p class="card-text" style="font-size:12px;">Branch: ${p.default_branch}</p>
+ <p class="card-text card-lang" style="font-size:12px;">Language: ${p.language}</p>
+ <a href="https://api.github.com/repos/larymak/${p.name}/zipball/" class="btn btn-primary" ><i class="fa fa-download"></i>Download</a>
+ <a href="morepage.html" class="btn btn-info" style="float:right; display:flex;justify-content:center;align-items:center"><i class="fa fa-info" style="color:black; font-size:14px"></i>More Info</a>
+ </div>
+ </div>
+
+ `
+ options.push(p.language)
+ });
+ fArr = options.filter((item,
+ index) => options.indexOf(item) === index);
+ fArr.forEach((arrVal) => {
+ content1 += `
+ <option value=${arrVal}>${arrVal}</option>
+
+ `
+ })
+
+ document.querySelector("#panel").innerHTML = content;
+ document.querySelector("#formSelect").innerHTML = content1;
+ };
+
+ request.send();
+
+ $(document).ready(function () {
+ $("#formSelect").on('change', function () {
+ const input = $(this).val().toUpperCase();
+ const cardContainer = document.getElementById("card-lists");
+ const cards = cardContainer.getElementsByClassName("card");
+ for (let i = 0; i < card.length; i++) {
+ let title = card[i].querySelector(".card-body .card-lang");
+ if(input == "ALL" ){
+ location.reload();
+ }
+ else if (title.innerText.toUpperCase().indexOf(input) > -1 ) {
+ cards[i].style.display = "";
+ } else {
+ cards[i].style.display = "none";
+ }
+
+ }
+ });
+ })
+
+</script>
+
+</html>
\ No newline at end of file
diff --git a/GUI/Web Interface for Github/morepage.html b/GUI/Web Interface for Github/morepage.html
new file mode 100644
index 00000000..cd4f3491
--- /dev/null
+++ b/GUI/Web Interface for Github/morepage.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
+ integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
+ integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
+ crossorigin="anonymous"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <title>Document</title>
+ <style>
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@500;600;700&display=swap');
+
+ * {
+ font-family: "Poppins", sans-serif;
+ margin: 0;
+ padding: 0;
+ }
+
+ .btn {
+ width: 90px;
+ height: 30px;
+ font-size: 11px;
+ }
+
+ .fa {
+ margin-right: 10px;
+ }
+
+
+ .card {
+ margin: 0;
+ padding: 0px;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ transform-style: preserve-3d;
+ transform-origin: center right;
+ transition: transform 1s;
+ perspective: 600px;
+ }
+
+ .card__face {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ font-weight: bold;
+ font-size: 14px;
+ backface-visibility: hidden;
+ text-align: center;
+ border-radius: 10px;
+ }
+
+ .card__face--front {
+ width: 100%;
+ height: 100%;
+ }
+
+ .card__face--back {
+ transform: rotateY(180deg);
+ }
+
+ .card.is-flipped {
+ transform: translateX(-100%) rotateY(-180deg);
+ }
+
+ #card-ul {
+ display: flex;
+ list-style-type: upper-greek;
+ /* margin-top: 20px; */
+ flex-direction: column;
+ padding-top: 20px;
+ align-items: flex-start;
+ height: 80%;
+ margin-left: 20px;
+ font-size: 12px;
+ }
+
+ #span-text {
+ border-bottom: 2px solid #0275d8;
+ width: 200px;
+ margin-left: 30px;
+ padding-top: 5px;
+ }
+
+ .class-li {
+ padding: 3px;
+ }
+ .main-content-diff{
+ display: grid;
+ grid-template-columns: auto auto;
+ justify-content: space-evenly;
+ align-content: center;
+ margin-top: 20px;
+ }
+ #text-content {
+ padding-top: 7px;
+ font-size: 12px;
+ text-align: start;
+ }
+ #text-content-sha{
+ max-width: 180px;
+ font-size: 11px;
+ text-align: start;
+ }
+
+ </style>
+</head>
+
+<body>
+ <nav class="navbar navbar-dark bg-dark mt-10"
+ style="display:flex;justify-content: flex-start; align-items: center;width: 80%;position: relative; bottom: 10px; left: 9%;">
+ <img src="https://avatars.githubusercontent.com/u/6811672?v=4" width="50" height="50" class="d-inline-block"
+ style="margin-left: 30px;" alt="">
+ <a class="navbar-brand" href="#" style="font-weight:900;margin-top: 20px;font-size: large;">
+
+ Github
+ </a>
+ </nav>
+
+
+ <div>
+ <h1 class="display-4 my-4 text-center" style="font-weight: 500;">
+ </h1>
+ </div>
+ <div class="container" style="width: 100%;" id="card-lists">
+ <div class="row" id="panel" style="width: 100%;">
+
+ </div>
+ </div>
+</body>
+
+<script>
+
+ const username = "******";
+ const password = "******"
+ const header = {
+ "Authorization": `Basic ${btoa(`${username}:${password}`)}`
+ }
+ let content = " ";
+ fetch("https://api.github.com/repos/larymak/Python-project-Scripts/contents", {
+ "method": "GET",
+ "headers": header
+ })
+ .then(response => response.json())
+ .then(jsonData => {
+ let data = jsonData
+ console.log(jsonData)
+ data.forEach((p) => {
+ content += `
+ <div class="card border-primary mb-3" style="max-width: 250px;margin:10px;height:200px">
+ <div class="card__face card__face--front">
+ <div class="card-header" style="display:flex;justify-content:space-between">
+ <text style="font-size:12px;"> ${p.name}</text>
+ <button type="button"
+ class="btn btn-outline-primary"
+ onclick= "viewDetail('${p.name}')"
+ id="ViewMore"
+ style="width:50px;float:right;height:20px;display:flex;justify-content:center;align-items:center;">More</button>
+ </div>
+
+ <div class="main-content-diff">
+ <text id="text-content">SHA: </text>
+ <text id="text-content-sha">${p.sha}</text>
+ <text id="text-content">Size: </text>
+ <text id="text-content">${p.size}</text>
+ <text id="text-content">Type: </text>
+ <text id="text-content">${p.type}</text>
+ </div>
+ </div>
+
+ <div class="card__face card__face--back">
+ <div id="span-text">
+ <span>File Details</span>
+ </div>
+ <div class="list-card">
+ <ul id="card-ul">
+
+ </ul>
+ </div>
+ </div>
+ </div>
+`
+ });
+ document.querySelector("#panel").innerHTML = content;
+ var cards = document.querySelectorAll('.card');
+ [...cards].forEach((card, i) => {
+ card.addEventListener('click', function () {
+ card.classList.toggle('is-flipped');
+ });
+
+ })
+ }).catch(err => {
+ console.log("Error: ", err);
+ })
+ function viewDetail(name) {
+ fetch("https://api.github.com/repos/larymak/Python-project-Scripts/contents/" + name)
+ .then(response => response.json())
+ .then(jsonData => {
+ let content1 = " ";
+ Array.from(jsonData, child => {
+
+ jsonData.forEach(element => {
+ content1 += `<li class="class-li">'${element.name}'</li>`
+
+ });
+
+ document.querySelector("#card-ul").innerHTML = content1;
+ });
+
+ });
+ }
+</script>
+
+
+
+
+</html>
\ No newline at end of file