diff options
| author | Saumit Dinesan <justsaumit@protonmail.com> | 2023-05-03 08:26:24 +0530 |
|---|---|---|
| committer | Saumit Dinesan <justsaumit@protonmail.com> | 2023-05-03 08:26:24 +0530 |
| commit | dc4f413032d2db8eadb4feaa511f3da6d2e75c6b (patch) | |
| tree | 77240c70dd9f1907a384cfe429def889a3ec5739 | |
| parent | a870f735bfa4008c3ca64b7f45c9f5b7531afd64 (diff) | |
webui: Adding style sheet for buttons
| -rw-r--r-- | webui/index.html | 30 | ||||
| -rw-r--r-- | webui/style2.css | 34 |
2 files changed, 57 insertions, 7 deletions
diff --git a/webui/index.html b/webui/index.html index a9e0ee6..d96a29c 100644 --- a/webui/index.html +++ b/webui/index.html @@ -21,14 +21,12 @@ <link rel="stylesheet" href="/style.css"/> <title>Raspberry Pi Face Recognition</title> - - + + <link rel="stylesheet" href="/style2.css"> + <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <body id="page"> - - - <div id="spotlight" class="animated fadeIn"> @@ -42,8 +40,12 @@ <a href="/live">Live-feed</a> <a href="/login">Login</a> - + </nav> + + <button id="button1" class="buttonclick" role="button">1.Input Face</button> + <button id="button2" class="buttonclick" role="button">2.Train Model</button> + <button id="button2" class="buttonclick" role="button">3.Face Recognizer</button> </div> @@ -53,6 +55,21 @@ <a href="https://github.com/justsaumit/opencv-face-recognition" target="_blank" rel="noopener me" title="github"> + <script> + $(document).ready(function() { + $('#button1').click(function() { + $.ajax({ + url: 'face_recognition.py', + success: function(data) { + alert('Face recognition completed successfully.'); + }, + error: function() { + alert('Error: Failed to run face recognition script.'); + } + }); + }); + }); + </script> <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> </a> @@ -70,7 +87,6 @@ </div> <script src="/js/main.js"></script> - <!-- Math rendering --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script> diff --git a/webui/style2.css b/webui/style2.css new file mode 100644 index 0000000..f50e8f0 --- /dev/null +++ b/webui/style2.css @@ -0,0 +1,34 @@ +.buttonclick { + background-color: #383737; + border-radius: 4px; + border-style: none; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-block; + font-family: "Farfetch Basis","Helvetica Neue",Arial,sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 1.5; + margin: 0 auto; + margin-top: 10px; + margin-bottom: 10px; + max-width: 200px; + min-height: 44px; + min-width: 10px; + outline: none; + overflow: hidden; + padding: 9px 20px 8px; + position: relative; + text-align: center; + text-transform: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + width: 100%; +} + +.buttonclick:hover, +.buttonclick:focus { + opacity: .75; +} |