Update index.html

hcr5 · Feb 17, 2024 · babd5c8 · babd5c8
1 parent 14a503d
commit babd5c8
Showing 1 changed file with 84 additions and 37 deletions.
diff --git 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>