From babd5c8878f8cb18df7fe587931d43cafeb7efa5 Mon Sep 17 00:00:00 2001
From: hcr5 <157815647+hcr5@users.noreply.github.com>
Date: Sat, 17 Feb 2024 20:22:06 +0100
Subject: [PATCH] Update index.html

---
 index.html | 121 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 84 insertions(+), 37 deletions(-)
diff --git a/index.html b/index.html
index 07ae88e..a8ef8bb 100644
--- a/index.html
+++ b/index.html
@@ -2,58 +2,105 @@
 <html>
 <head>
     <title>Scratch Followers</title>
-    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f0f0f0;
+        }
+        
+        .container {
+            max-width: 400px;
+            width: 100%;
+            padding: 20px;
+            background-color: #fff;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        
+        input[type="text"] {
+            width: calc(100% - 100px);
+            padding: 8px;
+            margin-right: 10px;
+            border-radius: 4px;
+            border: 1px solid #ccc;
+        }
+        
+        button {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 4px;
+            background-color: #007bff;
+            color: #fff;
+            cursor: pointer;
+        }
+        
+        button:hover {
+            background-color: #0056b3;
+        }
+        
+        #result {
+            margin-top: 20px;
+        }
+    </style>
 </head>
 <body>
 
-<input type="text" id="username" placeholder="Enter Username">
-<button onclick="loadFollowers()">Load Followers</button>
-<button onclick="stopLoading()">Stop</button>
-<div id="result"></div>
+<div class="container">
+    <input type="text" id="username" placeholder="Enter Username">
+    <button onclick="loadFollowers()">Load Followers</button>
+    <button onclick="stopLoading()">Stop</button>
+    <div id="result"></div>
+</div>
 
+<script src="https://code.jquery.com/jquery-latest.min.js"></script>
 <script>
-var loading = false; // Flag to track if loading is in progress
-var stopLoadingFlag = false; // Flag to track if the loading process should be stopped
+    var loading = false; // Flag to track if loading is in progress
+    var stopLoadingFlag = false; // Flag to track if the loading process should be stopped
 
-function loadFollowers() {
-    var username = document.getElementById("username").value;
-    var page = 1;
-    loading = true; // Set loading flag to true
+    function loadFollowers() {
+        var username = document.getElementById("username").value;
+        var page = 1;
+        loading = true; // Set loading flag to true
 
-    // Clear old followers before loading new ones
-    $('#result').empty();
+        // Clear old followers before loading new ones
+        $('#result').empty();
 
-    function load() {
-        if (!stopLoadingFlag) { // Check if loading process should continue
-            $.get("https://scratch.mit.edu/users/" + username + "/followers/?page=" + page, loaded);
+        function load() {
+            if (!stopLoadingFlag) { // Check if loading process should continue
+                $.get("https://scratch.mit.edu/users/" + username + "/followers/?page=" + page, loaded);
+            }
         }
-    }
 
-    function loaded(data) {
-        var $dom = $(data);
-        var $users = $dom.find('span.title > a');
-        var $out = $('#result');
+        function loaded(data) {
+            var $dom = $(data);
+            var $users = $dom.find('span.title > a');
+            var $out = $('#result');
 
-        for (var i = 0; i < $users.length; i++) {
-            var user = $($users[i]).text().trim();
-            $out.append(user + '<br>');
-        }
+            for (var i = 0; i < $users.length; i++) {
+                var user = $($users[i]).text().trim();
+                $out.append(user + '<br>');
+            }
 
-        page++;
-        if (!stopLoadingFlag) { // Check if loading process should continue
-            $.get("https://scratch.mit.edu/users/" + username + "/followers/?page=" + page, loaded);
-        } else {
-            loading = false; // Set loading flag to false when loading stops
+            page++;
+            if (!stopLoadingFlag) { // Check if loading process should continue
+                $.get("https://scratch.mit.edu/users/" + username + "/followers/?page=" + page, loaded);
+            } else {
+                loading = false; // Set loading flag to false when loading stops
+            }
         }
-    }
 
-    load();
-}
-
-function stopLoading() {
-    stopLoadingFlag = true; // Set the flag to stop loading
-}
+        load();
+    }
 
+    function stopLoading() {
+        stopLoadingFlag = true; // Set the flag to stop loading
+    }
 </script>
 
 </body>
