i am sad

open-source-arcade/Contributors.md

@@ -0,0 +1,53 @@
+Information Management Group
+Angel Sharma
+<br>
+Cherish Puniani
+<br>
+Arnav Garg
+Akhil Punia
+Noble Mittal
+Suyash Rahul
+Bhoomi Bonal
+Ujjwal Arya
+Somil Jain
+Dhruv Saxena
+Nikhil Nagar
+LU_1F3R
+Bhuro
+
+Mohit Agarwal
+Sourav
+
+Anshika Arora
+
+Dhairya Singhal
+Arnav Gupta
+
+Aditya Karwa
+Dhruv Pankaj
+
+Tanmay Sharma
+Shashank Shekhar
+Yash Hirani
+Aditya Ranjan
+Shantanu Singh
+Divyansh Agarwal
+kavya rajput
+Devansh Pandey
+Sanjeet Manna
+
+Hardik Narang
+Vaishnavi Kolgane
+Jasleen Kaur
+Vatsal Agarwal
+Basde Papa
+Divij Rawal
+Utsah
+Krishna Awasthi
+Pranav Konidena
+Abhay Pratap Choudhary
+Prachi Bhagat
+Archit Modi
+Lakshita
+Saurabh Rana
+

open-source-arcade/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Information Management Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

open-source-arcade/README.md

@@ -0,0 +1,113 @@
+# First Open Source Contribution
+
+This project aims to simplify and guide the way beginners make their first contribution. If you are looking to make your first contribution, follow the steps below.
+
+<img align="right" width="300" src="https://github.com/IMGIITRoorkee/open-source-arcade/assets/77184239/9d9b85e8-9862-42ae-915f-bb30a20fd056" alt="fork this repository" />
+
+#### If you don't have git on your machine, [install it](https://docs.github.com/en/get-started/quickstart/set-up-git).
+
+## Fork this repository
+
+Fork this repository by clicking on the fork button on the top of this page.
+This will create a copy of this repository in your account.
+
+## Clone the repository
+
+<img align="right" width="300" src="https://github.com/IMGIITRoorkee/open-source-arcade/assets/77184239/39d27e42-6890-4aa4-a0ed-06432d2925df" alt="clone this repository" />
+
+Now clone the forked repository to your machine. Go to your GitHub account, open the forked repository, click on the code button and then click the _copy to clipboard_ icon.
+
+Open a terminal and run the following git command:
+
+```bash
+git clone URL_COPIED
+```
+
+where `URL_COPIED` is the url to this repository (your fork of this project). See the previous steps to obtain the url.
+
+<img align="right" width="300" src="https://github.com/IMGIITRoorkee/open-source-arcade/assets/77184239/05e883f8-1d3c-43ff-900c-c79b59d2a7b7" alt="copy URL to clipboard" />
+
+For example:
+
+```bash
+git clone https://github.com/YOUR_USERNAME/open-source-arcade.git
+```
+
+where `YOUR_USERNAME` is your GitHub username. Here you're copying the contents of the open-source-arcade repository on GitHub to your computer.
+
+## Create a branch
+
+Change to the repository directory on your computer (if you are not already there):
+
+```bash
+cd open-source-arcade
+```
+
+Now create a branch using the `git checkout` command:
+
+```bash
+git checkout -b your-new-branch-name
+```
+
+For example:
+
+```bash
+git checkout -b add-inforamtion-management-group
+```
+
+## Make necessary changes and commit those changes
+
+Now open `Contributors.md` file in a text editor, add your name to it. Don't add it at the beginning or end of the file. Put it anywhere in between. Now, save the file.
+
+<img align="right" width="450" src="https://github.com/IMGIITRoorkee/open-source-arcade/assets/77184239/76183527-cf27-4e1b-b4c3-56237852db6c" alt="git status" />
+
+If you go to the project directory and execute the command `git status`, you'll see there are changes.
+
+Add those changes to the branch you just created using the `git add` command:
+
+```bash
+git add Contributors.md
+```
+
+Now commit those changes using the `git commit` command:
+
+```bash
+git commit -m "Add your-name to Contributors list"
+```
+
+replacing `your-name` with your name.
+
+## Push changes to GitHub
+
+Push your changes using the command `git push`:
+
+```bash
+git push -u origin your-branch-name
+```
+
+replacing `your-branch-name` with the name of the branch you created earlier.
+
+<details>
+<summary> <strong>If you get any errors while pushing, click here:</strong> </summary>
+
+- ### Authentication Error
+     <pre>remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
+  remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.
+  fatal: Authentication failed for 'https://github.com/<your-username>/first-contributions.git/'</pre>
+  Go to [GitHub's tutorial](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account) on generating and configuring an SSH key to your account.
+
+</details>
+
+## Submit your changes for review
+
+If you go to your repository on GitHub, you'll see a `Compare & pull request` button. Click on that button.
+
+<img style="float: right;" src="https://github.com/IMGIITRoorkee/open-source-arcade/assets/77184239/04c5d571-7f06-4df3-9808-fc82f8ad566f" alt="create a pull request" />
+
+Now submit the pull request.
+
+<img style="float: right;" src="https://github.com/IMGIITRoorkee/open-source-arcade/assets/77184239/d6721f53-1bb1-4eb5-aa37-eb82ea217a8f" alt="submit pull request" />
+
+Soon we'll be merging all your changes into the main branch of this project. You will get a notification email once the changes have been merged.
+
+Congrats! You just completed the standard _fork -> clone -> edit -> pull request_ workflow that you'll often encounter as a contributor!

open-source-arcade/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Open Source Arcade</title>
+
+		<!-- Link to Bootstrap CSS -->
+		<link
+			rel="stylesheet"
+			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+		/>
+		<!-- Link to your external CSS file -->
+		<link rel="stylesheet" href="src/styles.css" />
+	</head>
+	<body>
+		<div class="container mt-5">
+			<h1 class="text-center mb-4">Hello Contributors!</h1>
+
+			<!-- Search Bar -->
+			<div class="search-bar mb-4 text-center">
+				<input
+					type="text"
+					id="searchInput"
+					class="form-control"
+					placeholder="Search by name"
+					oninput="filterContributors()"
+				/>
+			</div>
+
+			<!-- Content will be dynamically loaded here -->
+			<div
+				class="contributor-list"
+				id="contributorList"
+			></div>
+		</div>
+
+		<!-- Link to your external JavaScript file -->
+		<script src="src/script.js"></script>
+	</body>
+</html>

open-source-arcade/src/script.js

@@ -0,0 +1,50 @@
+fetch("https://imgiitroorkee.github.io/open-source-arcade/Contributors.md")
+	.then((response) => response.text())
+	.then((data) => {
+		// Parse the data and create contributor cards
+		const contributors = data.split("\n").filter((line) => line.trim() !== "")
+
+		const contributorList = document.getElementById("contributorList")
+		contributors.forEach((contributor) => {
+			const [name] = contributor.split(",")
+
+			// Fetch a random avatar from the Multiavatar API
+			fetch("https://robohash.org/" + encodeURIComponent(name + ".png"))
+				.then((response) => response.blob())
+				.then((blob) => {
+					const avatarURL = URL.createObjectURL(blob)
+
+					const card = document.createElement("div")
+					card.className = "contributor-card"
+
+					const avatarImg = document.createElement("img")
+					avatarImg.src = avatarURL
+					avatarImg.alt = "Avatar"
+					avatarImg.className = "contributor-avatar"
+
+					const nameSpan = document.createElement("span")
+					nameSpan.textContent = name
+
+					card.appendChild(avatarImg)
+					card.appendChild(nameSpan)
+
+					contributorList.appendChild(card)
+				})
+				.catch((error) => console.error("Error fetching avatar:", error))
+		})
+	})
+	.catch((error) => console.error("Error fetching data:", error))
+
+function filterContributors() {
+	const searchInput = document.getElementById("searchInput").value.toLowerCase()
+	const contributorCards = document.querySelectorAll(".contributor-card")
+
+	contributorCards.forEach((card) => {
+		const name = card.querySelector("span").textContent.toLowerCase()
+		if (name.includes(searchInput)) {
+			card.style.display = "flex"
+		} else {
+			card.style.display = "none"
+		}
+	})
+}

open-source-arcade/src/styles.css

@@ -0,0 +1,61 @@
+body {
+	font-family: Arial, sans-serif;
+	margin: 20px;
+	background: #141414;
+}
+
+h1 {
+	text-align: center;
+	color: #333;
+}
+
+.text-center{
+	color: #fff;
+}
+
+.form-control{
+	margin: auto;
+	width: 80%;
+}
+
+.content {
+	max-width: 800px;
+	margin: 20px auto;
+	padding: 20px;
+	border: 1px solid #ddd;
+	border-radius: 8px;
+	background-color: #f9f9f9;
+}
+
+.search-bar {
+	margin-bottom: 20px;
+	text-align: center;
+}
+
+.contributor-list {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-evenly;
+}
+
+.contributor-card {
+	/* border: 1px solid #ddd; */
+	border-radius: 8px;
+	margin: 10px;
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	background:#222222;
+	color: #f9f9f9;
+	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
+
+}
+
+.contributor-avatar {
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	margin-bottom: 10px;
+}