From c91a8c41222685418e0af4f673767d94ba8e5dd4 Mon Sep 17 00:00:00 2001
From: mike <219478+ilude@users.noreply.github.com>
Date: Mon, 25 Mar 2024 11:28:20 -0400
Subject: [PATCH] quality of life improvements to UI

---
 app/templates/index.html | 54 ++++++++++++++++++++++++----------------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index 2a012a7..6583550 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -7,27 +7,39 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
     <script>
         $(document).ready(function () {
-            $('#expandForm').submit(function (event) {
-                event.preventDefault();
-                var userUrl = $('#urlInput').val();
-                $('#expandBtn').prop('disabled', true);
-                $('#spinner').show();
-                $('#expandedUrl').empty();
-                $('#screenshot').hide().empty();
-                $.ajax({
-                    type: 'POST',
-                    url: '/',
-                    data: { url: userUrl },
-                    success: function (response) {
-                        $('#expandedUrl').append($('<a>').attr('href', response).text(response));
-                        $('#screenshot').append($('<a>').attr('href', response).append($('<img>').attr('src', "{{ url_for('static', filename='screenshots/screenshot.png') }}"))).show();
-                    },
-                    complete: function () {
-                        $('#spinner').hide();
-                        $('#expandBtn').prop('disabled', false);
-                    }
-                });
+          $('#expandForm').submit(function (event) {
+            event.preventDefault();
+            var userUrl = $('#urlInput').val();
+            $('#expandBtn').prop('disabled', true);
+            $('#spinner').show();
+            $('#expandedUrl').empty();
+            $('#screenshot').hide().empty();
+            $.ajax({
+              type: 'POST',
+              url: '/',
+              data: { url: userUrl },
+              success: function (response) {
+                $('#expandedUrl').append(
+                  $('<a>').attr('href', response).text(response)
+                ).show();
+                $('#screenshot').append(
+                  $('<a>').attr('href', response).append($('<img>').attr('src', 
+                    "{{ url_for('static', filename='screenshots/screenshot.png') }}"
+                  ))
+                ).show();
+              },
+              complete: function () {
+                $('#spinner').hide();
+                $('#expandBtn').prop('disabled', false);
+              }
             });
+          });
+          $('input').on('focus', function (e) {
+            $(this).one('mouseup', function () {
+              $(this).select();
+              return false;
+            }).select();
+          });
         });
     </script>
 </head>
@@ -42,7 +54,7 @@ <h1 class="mb-0">OnGoing URL Expander</h1>
                   <div class="card-body">
                       <form id="expandForm">
                           <div class="input-group mb-3">
-                              <input type="text" class="form-control" id="urlInput" value="{{ url }}" placeholder="Enter a URL" />
+                              <input type="text" class="form-control" id="urlInput" value="{{ url }}" placeholder="Enter a URL" onFocus="this.select()" autofocus />
                               <button type="submit" class="btn btn-primary" id="expandBtn">
                                   Expand
                               </button>