diff --git a/About.html b/About.html index df5f388..32c7deb 100644 --- a/About.html +++ b/About.html @@ -1,32 +1,20 @@ + GitHub Toolkit - + + - +

GitHub Toolkit


@@ -53,9 +41,10 @@

GitHub Toolkit

GitHub

- GitHub Image + GitHub Image

-

GitHub is a web-based platform for version control using Git. It facilitates collaborative software development and project management.

+

GitHub is a web-based platform for version control using Git. It + facilitates collaborative software development and project management.

@@ -64,8 +53,11 @@
GitHub

Profile
- Profile Image -

A GitHub profile displays a user's repositories, contributions, and activity. It serves as a resume for showcasing skills and projects.

+ Profile Image +

+

A GitHub profile displays a user's repositories, contributions, and + activity. It serves as a resume for showcasing skills and projects.

@@ -73,8 +65,11 @@
Profile
Followers

- Followers Image -

Followers on GitHub are users who follow another user to stay updated on their activities, new repositories, projects, and contributions.

+ Followers Image +

+

Followers on GitHub are users who follow another user to stay updated on + their activities, new repositories, projects, and contributions.

@@ -84,8 +79,11 @@
Followers

Repository

- Repository Image -

A GitHub repository is a storage space for version-controlled files and project resources. It supports collaborative development and sharing.

+ Repository Image +

+

A GitHub repository is a storage space for version-controlled files and + project resources. It supports collaborative development and sharing.

@@ -93,8 +91,11 @@
Repository

Topics

- Topics Image -

GitHub Topics categorize repositories and are also used for search. They enable users to explore and discover projects based on specific themes or interests.

+ Topics Image +

+

GitHub Topics categorize repositories and are also used for search. They + enable users to explore and discover projects based on specific themes or interests.

@@ -102,8 +103,11 @@
Topics

Stars

- Stars Image -

Stars on GitHub let users bookmark repositories they find interesting or useful, showing appreciation for a project's work and contributions.

+ Stars Image +

+

Stars on GitHub let users bookmark repositories they find interesting or + useful, showing appreciation for a project's work and contributions.

@@ -113,8 +117,11 @@
Stars

License

- License Image -

A GitHub repository license specifies the terms under which the project's code can be used, modified, and shared, ensuring clear rights and obligations.

+ License Image +

+

A GitHub repository license specifies the terms under which the project's + code can be used, modified, and shared, ensuring clear rights and obligations.

@@ -122,8 +129,11 @@
License

Issues

- Issues Image -

Issues on GitHub track bugs, enhancements, and tasks. They facilitate collaboration by allowing users to discuss and manage the development process.

+ Issues Image +

+

Issues on GitHub track bugs, enhancements, and tasks. They facilitate + collaboration by allowing users to discuss and manage the development process.

@@ -131,8 +141,11 @@
Issues

Pull Requests

- Pull Requests Image -

Pull requests on GitHub let users propose changes to a repository. They enable code review and discussion before changes are merged into the main project.

+ Pull Requests Image +

+

Pull requests on GitHub let users propose changes to a repository. They + enable code review and discussion before changes are merged into the main project.

@@ -143,4 +156,5 @@
Pull Requests

- + + \ No newline at end of file diff --git a/css/about.css b/css/about.css new file mode 100644 index 0000000..989be25 --- /dev/null +++ b/css/about.css @@ -0,0 +1,15 @@ +.card { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s, box-shadow 0.3s; +} + +.card:hover { + transform: translateY(-10px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + +h3 { + text-align: center; + color: #007bff; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); +} \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..b94e9e9 --- /dev/null +++ b/css/index.css @@ -0,0 +1,151 @@ +.card { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s, box-shadow 0.3s; + height: 100%; + display: flex; + flex-direction: column; +} + +.card:hover { + transform: translateY(-10px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + +h2, +h3 { + text-align: center; + color: #007bff; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); +} + +.user-info-card { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + margin-bottom: 20px; + display: none; + align-items: center; + max-width: 600px; + margin: 0 auto; +} + +.user-info-card img { + border-radius: 50%; + max-width: 150px; + height: auto; + margin-right: 20px; +} + +.user-details { + flex-grow: 1; + text-align: center; + /* Center align user details */ +} + +.form-control { + width: 200px; + margin: 0 auto; + display: block; +} + +.repo-card { + display: flex; + flex-direction: column; + height: 100%; + border-top: 1px solid #ccc; + padding-top: 10px; +} + +.repo-card .card-body { + flex: 1; + display: flex; + flex-direction: column; +} + +.repo-description { + margin-top: auto; + padding: 1rem; + background-color: #d0ebff; + border: 1px solid #74c0fc; + border-radius: 0.25rem; +} + +.repo-link { + text-align: center; + margin-top: auto; +} + +.repo-link a { + display: inline-block; + margin-top: 10px; + padding: 5px 10px; + background-color: #007bff; + color: #ffffff; + border-radius: 4px; + text-decoration: none; +} + +.repo-link a:hover { + text-decoration: none; + background-color: #0056b3; + color: #ffffff; +} + +.pagination { + justify-content: center; + margin-top: 20px; +} + +.loader-container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.loader { + border: 16px solid #f3f3f3; + border-radius: 50%; + border-top: 16px solid #3498db; + width: 120px; + height: 120px; + animation: spin 2s linear infinite; + margin-bottom: 20px; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.repo-card .card-title { + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + /* Adding shadow effect to repo name */ + color: #007bff; + /* Adjust color to match existing theme */ +} + +.topic-button { + background-color: #ffc107; + /* Yellow background color */ + color: #212529; + border: none; + margin: 2px; + box-shadow: 0 2px 4px rgba(255, 193, 7, 0.5); + /* Shadow effect for topics button */ +} + +.topic-button:hover { + background-color: #ffb400; + /* Darker yellow on hover */ + color: #212529; +} + +.centered-td { + text-align: center; + vertical-align: middle; +} \ No newline at end of file diff --git a/index.html b/index.html index 482d440..ca5e520 100644 --- a/index.html +++ b/index.html @@ -1,214 +1,100 @@ + GitHub Glimpse - + - + -

-

GitHub Glimpse

-
-
-
- -
- -

- Enter a GitHub username above to fetch their public repositories. -
-
+

+
+

GitHub Glimpse

+
+
+
+
+ +
+ +

+ Enter a GitHub username above to fetch their public repositories. +
+
-
-
-
-