Merge pull request #370 from JirenXmoksh/master

Revamping of the captcha generator's UI
Sulagna-Dutta-Roy · May 21, 2024 · 9f3df3b · 9f3df3b
2 parents b6e5cde + a448d05
commit 9f3df3b
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 14 deletions.
diff --git a/Capcha Generator/index.html b/Capcha Generator/index.html
@@ -12,26 +12,26 @@
 </head>
 <body>
 <div class="container">
-    <header>Captcha Generator</header>
+    <header style="color: #333;  font-size:22px;">Captcha Generator</header>
     <div class="input_field captch_box">
-        <input id="captchaOutput" type="text" value="" disabled />
-        <button class="refresh_button" onclick="generateCaptcha()">
-            <i class="fa-solid fa-rotate-right"></i>
+        <input id="captchaOutput" style="border: 1px solid #1e1b18" type="text" value="" />
+        <button class="refresh_button" id="refbut" onclick="generateCaptcha()">
+            <i class="fa-solid fa-rotate-left"></i>
         </button>
     </div>
     <div class="input_field captch_input">
         <input id="captchaInput" type="text" placeholder="Enter captcha" />
     </div>
     <div id="message" class="message">Entered captcha is correct</div>
-    <div class="input_field button disabled">
-        <button onclick="checkCaptcha()">Submit Captcha</button>
+    <div  class="input_field button ">
+        <button onclick="checkCaptcha()" id="inputfield">Submit Captcha</button>
     </div>
     <div class="captcha-history">
-        <h2>Captcha History</h2>
+        <h4>Captcha History</h4>
         <ul id="captchaHistoryList"></ul>
     </div>
     <div class="audio-captcha">
-        <button onclick="playAudioCaptcha()">Play Audio Captcha</button>
+        <button onclick="playAudioCaptcha()" id="audcaptch" >Audio Captcha</button>
         <audio id="audioCaptcha" controls style="display: none;">
             <source src="audio/captcha.mp3" type="audio/mpeg">
             Your browser does not support the audio element.

diff --git a/Capcha Generator/src/style.css b/Capcha Generator/src/style.css
@@ -11,14 +11,20 @@ body {
   align-items: center;
   justify-content: center;
   background-image: url(bg.jpg);
+  background-size: cover;
+  background-position: -1px;
+
 }
 .container {
   position: relative;
   max-width: 300px;
   width: 100%;
-  border-radius: 12px;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+  border: 1px solid #1e1b18;
   padding: 15px 25px 25px;
-  background: #fff;
+  background: rgba(255, 255,255, 0.4);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
 }
 header {
@@ -34,22 +40,44 @@ header {
   margin-top: 15px;
   width: 100%;
 }
+#inputfield{
+  background-color: #0d5dd5;
+  color: #fff;
+  transition: 0.4s;
+  font-size: 13px;
+  border: 1px solid #333;
+}
+#inputfield:hover{
+  background-color: #06f;
+  color: #fff;
+  border: 1px solid #333;
+  offset: 20px;
+}
 .refresh_button {
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
-  background: #1940a5;
+  background: #fcc4f4;
   height: 30px;
   width: 30px;
   border: none;
-  border-radius: 4px;
-  color: #fff;
+  border-radius: 50%;
+  color: #2c2926;
   cursor: pointer;
+  border: 1px solid #fcc4f4;
+  box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
 }
 .refresh_button:active {
   transform: translateY(-50%) scale(0.98);
 }
+#refbut{
+  transition: 0.4s;
+}
+#refbut:hover{
+  box-shadow: 1px 2px 3px rgba(0,0,0,0.6);
+
+}
 .input_field input,
 .button button {
   height: 100%;
@@ -70,6 +98,25 @@ header {
 .captch_input input:focus {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
 }
+#captchaOutput{
+  background: rgba(255, 175, 250, 0.457);
+  color: #555;
+}
+#captchaInput{
+    transition: 0.4s;
+    background: rgba(255, 255, 255, 0.457);
+    border: 1px solid #444;
+}
+#captchaInput:hover{
+    border: 1px solid #444;
+    background-color: white;
+}
+.captcha-history{
+  margin-top: 15px;
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: #333;
+}
 .message {
   font-size: 14px;
   margin: 14px 0;
@@ -91,4 +138,17 @@ header {
 .button.disabled {
   opacity: 0.6;
   pointer-events: none;
-}
+}
+#audcaptch{
+  padding: 7px;
+  border: 1px solid #333;
+  border-radius: 6px;
+  font-size: 10px;
+  color: #333;
+  background: rgba(252, 196, 244, 0.7);
+  transition: 0.4s;
+}
+#audcaptch:hover{
+  background: rgba(252, 196, 244, 0.8);
+  box-shadow: 1px 2px 3px #1940a5;
+}