From f6fc22ceda23b6afb321ef3548486cdf11845f2c Mon Sep 17 00:00:00 2001
From: unknown <2021503039@mitindia.edu.in>
Date: Mon, 18 Nov 2024 10:25:43 +0530
Subject: [PATCH] Enhance UI with Bootstrap 5, Select2, and Modern Design
 Updates

---
 index.html | 422 +++++++++++++++++++++++------------------------------
 1 file changed, 183 insertions(+), 239 deletions(-)
diff --git a/index.html b/index.html
index 1f6f9d4a..a0404bd3 100644
--- a/index.html
+++ b/index.html
@@ -1,265 +1,209 @@
 <!doctype html>
 <html>
-	<head>
-	<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
-	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
-
-	</head>
-<style>
-
-body {
-        background-color: rgba(250, 251, 254, 1.0);
-}
-
-.IssueLabel {
-    height: 20px;
-    padding: 0.15em 6px;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 15px;
-    border-radius: 2px;
-    box-shadow: inset 0 -1px 0 rgba(27,31,35,0.12);
-}
-
-.GoodFirstIssue {
-	background-color: #7057ff;
-	color: #ffffff;
-}
-
-.StarterTask {
-    background-color: #62dbc9;
-    color: #000000;
-}
-
-.HelpWanted {
-    background-color: #008672;
-    color: #ffffff;
-}
-
-.search-body {
-background-color: #ffffff;
-box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15);
-border: 1px solid rgba(154, 161, 171, .15);
-}
-
-
-.spinner {
-  display: none;
-  position: absolute;
-  left: 50%;
-  z-index: 1;
-  width: 120px;
-  height: 120px;
-  margin: -75px 0 0 -75px;
-  border: 16px solid #f3f3f3;
-  border-radius: 50%;
-  border-top: 16px solid #7057ff;
-  -webkit-animation: spin 2s linear infinite;
-  animation: spin 2s linear infinite;
-}
-
-
-@-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #0073e6;
-    border-color: #0073e6;
-}
-
-.btn {
-    display: inline-block;
-    font-weight: 400;
-    line-height: 1.25;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    border: 1px solid transparent;
-    padding: .5rem 1rem;
-    font-size: 1rem;
-    border-radius: .25rem;
-}
+<head>
+    <!-- Latest Bootstrap 5 -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- FontAwesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
+    <!-- Select2 for Enhanced Dropdown -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
+    <!-- Custom CSS -->
+    <style>
+        body {
+            background-color: #f5f7fa;
+            font-family: 'Lato', sans-serif;
+        }
 
-.welcome {
-    margin-bottom: 2rem;
-    margin-top: 1.5rem;
-    font-family: 'Lato', sans-serif;
-}
+        .IssueLabel {
+            height: 20px;
+            padding: 0.15em 6px;
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 15px;
+            border-radius: 4px;
+            box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
 
+        .GoodFirstIssue {
+            background-color: #7057ff;
+            color: #ffffff;
+        }
 
-.hidden {
-display: none;
-}
+        .StarterTask {
+            background-color: #62dbc9;
+            color: #000000;
+        }
 
-.welcome {
-}
+        .HelpWanted {
+            background-color: #008672;
+            color: #ffffff;
+        }
 
-.welcome h1 {
-    font-weight: 700;
-}
+        .IssueLabel:hover {
+            transform: scale(1.1);
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
 
-.lead {
-    margin-bottom: 0.775rem !important;
-}
+        .welcome {
+            margin-bottom: 2rem;
+            margin-top: 2rem;
+            text-align: center;
+        }
 
-.form-header {
-	margin-left: 15px;
-	margin-top: 0.75rem;
-	margin-bottom: 2rem;
-}
+        .welcome h1 {
+            font-weight: 700;
+            font-size: 2.5rem;
+        }
 
-.TopLabel {
-	margin-top: 8px;
-	margin-left: 8px;
-}
+        .lead {
+            font-size: 1.25rem;
+            margin-bottom: 1rem;
+        }
 
-.custom-select {
-    display: inline-block;
-    max-width: 100%;
-    height: calc(2.25rem + 2px);
-    padding: .375rem 1.75rem .375rem .75rem;
-    line-height: 1.25;
-    color: #464a4c;
-    vertical-align: middle;
-    background: #fff url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…'0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E) no-repeat right .75rem center;
-    -webkit-background-size: 8px 10px;
-    background-size: 8px 10px;
-    border: 1px solid rgba(0,0,0,.15);
-    border-radius: .25rem;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-}
+        .search-body {
+            background-color: #ffffff;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
+            border: 1px solid rgba(154, 161, 171, 0.15);
+        }
 
-.QuestionsSuggestions  {
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	font-size: 0.8rem;
-}
+        .spinner {
+            display: none;
+            margin: 20px auto;
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #7057ff;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+        }
 
-.text-muted {
-color: #636c72;
-margin-bottom: 0px;
-font-weight: 300;
-font-size: 90%;
-margin-right: 6px;
-}
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
 
-.paddedLeftMargin {
-margin-left: 25px;
-}
+            100% {
+                transform: rotate(360deg);
+            }
+        }
 
-#submit {
-margin-left: 25px;
-width: 300px;
-}
+        .form-header {
+            margin-bottom: 1.5rem;
+        }
 
-.sortsTable:hover {
-color: #7057ff;
-cursor: url(hand.cur), pointer;
-}
+        .custom-select {
+            width: 100%;
+        }
 
+        .table thead th {
+            background-color: #f8f9fa;
+        }
 
-</style>
+        @media (max-width: 768px) {
+            .welcome h1 {
+                font-size: 2rem;
+            }
 
+            .lead {
+                font-size: 1rem;
+            }
+        }
+    </style>
+</head>
 <body>
-     	<p class="TopLabel"><label class="IssueLabel GoodFirstIssue">Good First Issue</label>.com</p>
-	<div class="container-fluid hidden-sm-down">
-	<div class="row">
-	<div class="col-md-12 text-center QuestionsSuggestions">
-	<span class="news">Questions? Suggestions? <a class="center-block" target="_blank" href="https://twitter.com/messages/compose?recipient_id=966086645111025665">Send me a PM</a> on <i class="fa fa-twitter" aria-hidden="true"></i></span>
-	</div>
-	</div>
-	</div>
-
-	<span class="octicon octicon-clippy"></span>
-	<div class="container welcome">
-		<div class="row d-block">
-		<h1>Find Great Open Source Opportunities.</h1>
-		<p class="lead">Made for new contributors to find great Open Source projects.</p>
-		<p>Discover Issues and Repositories with <label class="IssueLabel HelpWanted">Help Wanted</label> <label class="IssueLabel StarterTask">Starter Task</label> and <Label class="IssueLabel GoodFirstIssue">Good First Issue</label> labels. </p>
-		</div>
-	</div>
-
-	<div class="container search-body">
-  		<div class="row">
-				<div class = 'form-header'>
-				<form class="QueryParametersForm form-inline" onsubmit="onSubmitButton();return false;">
-						<select class="LanguageOptions form-control" onchange="onSubmitButton()">
-							<option>Choose Language</option>
-							<option value="ActionScript">ActionScript</option>
-							<option value="C">C</option>
-							<option value="C#">C#</option>
-							<option value="C++">C++</option>
-							<option value="Clojure">Clojure</option>
-							<option value="CoffeeScript">CoffeeScript</option>
-							<option value="CSS">CSS</option>
-							<option value="Go">Go</option>
-							<option value="Haskell">Haskell</option>
-							<option value="HTML">HTML</option>
-							<option value="Java">Java</option>
-							<option value="JavaScript">JavaScript</option>
-							<option value="Lua">Lua</option>
-							<option value="Matlab">Matlab</option>
-							<option value="Objective-C">Objective-C</option>
-							<option value="Perl">Perl</option>
-							<option value="PHP">PHP</option>
-							<option value="Python">Python</option>
-							<option value="R">R</option>
-							<option value="Ruby">Ruby</option>
-							<option value="Scala">Scala</option>
-							<option value="Shell">Shell</option>
-							<option value="Swift">Swift</option>
-							<option value="TeX">TeX</option>
-							<option value="Vim script">Vim script</option>
-						</select>
-					</form>
-				</div>
-
-		<div class="table-responsive">
-		<div class="spinner"></div>
-		<table class="table hidden">
-			<col width="40%">
-			<col width="20%">
-			<col width="20%">
-			<col width="20%">
-			<thead>
-				<tr>
-				<th>Repository</th>
-				<th class="sortsTable" value="Good First Issue">Good First Issues</th>
-				<th class="sortsTable" value="Stars">Stars</th>
-				<th>Last Update</th>
-				</tr>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
-		</div>
-
-		</div>
-		</div>
-	</div>
-
-
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <!-- Header Section -->
+    <div class="welcome">
+        <h1>Discover Open Source Opportunities</h1>
+        <p class="lead">Find repositories with <span class="IssueLabel GoodFirstIssue">Good First Issue</span>, <span class="IssueLabel StarterTask">Starter Task</span>, and <span class="IssueLabel HelpWanted">Help Wanted</span> labels.</p>
+    </div>
+
+    <!-- Search Section -->
+    <div class="container search-body">
+        <div class="form-header">
+            <form onsubmit="onSubmitButton(); return false;">
+                <div class="row">
+                    <div class="col-md-6">
+                        <select class="LanguageOptions form-select" onchange="onSubmitButton()">
+                            <option value="" selected>Choose Language</option>
+                            <option value="Python">Python</option>
+                            <option value="JavaScript">JavaScript</option>
+                            <option value="Java">Java</option>
+                            <option value="C++">C++</option>
+                            <option value="Go">Go</option>
+                            <option value="Ruby">Ruby</option>
+                            <option value="Swift">Swift</option>
+                            <option value="HTML">HTML</option>
+                        </select>
+                    </div>
+                </div>
+            </form>
+        </div>
+
+        <div class="spinner"></div>
+        <div class="table-responsive">
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>Repository</th>
+                        <th>Good First Issues</th>
+                        <th>Stars</th>
+                        <th>Last Updated</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Example Repo</td>
+                        <td><span class="IssueLabel GoodFirstIssue">3 Issues</span></td>
+                        <td>120</td>
+                        <td>2 days ago</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- Footer Section -->
+    <div class="container mt-4 text-center">
+        <p>Questions? Suggestions? <a href="https://twitter.com/messages/compose?recipient_id=966086645111025665" target="_blank">Send me a PM</a> on <i class="fa fa-twitter" aria-hidden="true"></i></p>
+    </div>
+
+    <!-- JavaScript to Enhance Interactions -->
+    <script>
+        // Initialize Select2 for dropdown
+        document.addEventListener('DOMContentLoaded', function () {
+            $('.LanguageOptions').select2({
+                placeholder: "Choose a Language",
+                allowClear: true
+            });
+        });
+
+        function onSubmitButton() {
+            const spinner = document.querySelector('.spinner');
+            spinner.style.display = 'block';
+
+            setTimeout(() => {
+                spinner.style.display = 'none';
+                alert("Search completed! (Simulated)");
+            }, 2000);
+        }
+    </script>
+	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+</body>
+</html>
+
 </body>
 </html>
 
+
 <script>
 
 
