-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature Update : Enhanced CAPTCHA Options (#306)
## Related Issue closes #305 ## Email id used to register for VSoc'24 atharavashihurkar@gmail.com ## Description I have updated the basic CAPTCHA generator to include multiple CAPTCHA types, allowing users to choose between text, image, audio, and math CAPTCHAs. This improves accessibility and user experience. Additionally, I have implemented a feature to limit the number of attempts before temporarily locking out the user. ## Type of PR - [ ] Bug fix - [X] Feature enhancement - [X] Documentation update - [X] Security enhancement - [ ] Other (specify): _______________ ## Screenshots / Videos (if applicable) https://github.com/user-attachments/assets/63da1529-8504-4d47-ae79-eaf5d4326e1a ## Checklist - [X] I have performed a self-review of my code. - [X] I have read and followed the Contribution Guidelines. - [X] I have tested the changes thoroughly before submitting this pull request. - [X] I have provided relevant issue numbers, screenshots, and videos after making the changes. - [X] I have commented my code, particularly in hard-to-understand areas. - [X] I have followed the code style guidelines of this project. - [X] I have checked for any existing open issues that my pull request may address. - [X] I have ensured that my changes do not break any existing functionality. - [X] Each contributor is allowed to create a maximum of 4 issues per day. This helps us manage and address issues efficiently. - [X] I have read the resources for guidance listed below. - [X] I have followed security best practices in my code changes. ## Additional Context These updates aim to enhance the basic CAPTCHA generator by making it more accessible and user-friendly, including options for visually impaired users and additional security measures to prevent abuse.
- Loading branch information
Showing
3 changed files
with
289 additions
and
144 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,143 +1,166 @@ | ||
| *{ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
| body{ | ||
|
|
||
| body { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100dvh; | ||
| min-height: 100vh; | ||
| background: black; | ||
| --dot-bg: black; | ||
| --dot-color: white; | ||
| --dot-size: 1px; | ||
| --dot-space: 22px; | ||
| background: | ||
| linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), | ||
| linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), | ||
| var(--dot-color); | ||
|
|
||
| --dot-bg: black; | ||
| --dot-color: white; | ||
| --dot-size: 1px; | ||
| --dot-space: 22px; | ||
| background: | ||
| linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), | ||
| linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), | ||
| var(--dot-color); | ||
| font-family: Arial, sans-serif; | ||
| } | ||
| .container{ | ||
|
|
||
| .container { | ||
| display: grid; | ||
| height: auto; | ||
| width: auto; | ||
| justify-items:left; | ||
| gap: 30px; | ||
| width: 350px; | ||
| gap: 20px; | ||
| border-radius: 20px; | ||
| background: white; | ||
| border:2px solid transparent; | ||
| color: black; | ||
| padding: 20px; | ||
| font-size: larger; | ||
| font-size: 16px; | ||
| box-shadow: 0px 0px 14px 9px gray; | ||
| } | ||
| .container header{ | ||
| justify-self: center; | ||
|
|
||
| .container header { | ||
| text-align: center; | ||
| font-size: xx-large; | ||
| font-weight: bolder; | ||
| font-size: 24px; | ||
| font-weight: bold; | ||
| } | ||
| .container p{ | ||
|
|
||
| .container p { | ||
| color: grey; | ||
| margin-bottom: 5px; | ||
| } | ||
| .result{ | ||
| text-align: left; | ||
| font-size: medium; | ||
| font-weight: bold; | ||
| color: grey; | ||
| display: none; | ||
|
|
||
| #captchaType { | ||
| width: 100%; | ||
| padding: 10px; | ||
| border-radius: 10px; | ||
| border: 1px solid grey; | ||
| margin-bottom: 10px; | ||
| } | ||
| .result.active{ | ||
| display: block; | ||
|
|
||
| #captchaContainer { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 100px; | ||
| background-color: #f0f0f0; | ||
| border-radius: 10px; | ||
| padding: 10px; | ||
| text-align: center; | ||
| } | ||
| input{ | ||
| height: 50px; | ||
| color: black; | ||
| width: 300px; | ||
| font-size: 40px; | ||
| border-radius: 20px; | ||
| padding: 31px; | ||
| border: 1px solid grey; | ||
|
|
||
| #captchaContainer .image-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(3, 1fr); | ||
| gap: 10px; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| #captchaContainer .image-option { | ||
| width: 60px; | ||
| height: 60px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| font-size: 30px; | ||
| background-color: #fff; | ||
| border: 1px solid #ddd; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
| } | ||
| .textcaptcha{ | ||
| margin-top: -15px; | ||
|
|
||
| #captchaContainer .image-option:hover { | ||
| background-color: #e0e0e0; | ||
| } | ||
| .textcaptcha input{ | ||
| font-size: large; | ||
|
|
||
| #playAudio { | ||
| padding: 10px 20px; | ||
| font-size: 16px; | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| #playAudio:hover { | ||
| background-color: #45a049; | ||
| } | ||
|
|
||
| #playAudio:disabled { | ||
| opacity: 0.5; | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| .textcaptcha input { | ||
| width: 100%; | ||
| height: 50px; | ||
| padding: 10px; | ||
| font-size: 16px; | ||
| border-radius: 10px; | ||
| border: 1px solid grey; | ||
| } | ||
|
|
||
| .refresh { | ||
| position: relative; | ||
| right: 51px; | ||
| top: -5px; | ||
| justify-self: end; | ||
| height: 40px; | ||
| width: 40px; | ||
| background: grey; | ||
| border: none; | ||
| font-size: x-large; | ||
| z-index: 2; | ||
| width: 40px; | ||
| font-size: 20px; | ||
| border-radius: 10px; | ||
| cursor: pointer; | ||
| color: white; | ||
| } | ||
|
|
||
| .button{justify-self: center;} | ||
| .button button{ | ||
|
|
||
| .result { | ||
| text-align: center; | ||
| font-weight: bold; | ||
| color: grey; | ||
| min-height: 20px; | ||
| } | ||
|
|
||
| .button { | ||
| justify-self: center; | ||
| } | ||
|
|
||
| .button button { | ||
| height: 45px; | ||
| background: grey; | ||
| color:white; | ||
| color: white; | ||
| width: 200px; | ||
| font-size: 15px; | ||
| border-radius: 15px; | ||
| padding: 10px; | ||
| border: 1px solid grey; | ||
| border: none; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
| } | ||
| .button :hover{ | ||
|
|
||
| .button button:hover { | ||
| background: rgb(71, 69, 69); | ||
| } | ||
| @media only screen and (max-width: 600px) { | ||
| .container{ | ||
| height: 500px; | ||
| width: 330px; | ||
| display: grid; | ||
|
|
||
| justify-items:left; | ||
| gap: 0px; | ||
| border-radius: 20px; | ||
| background: white; | ||
| border:2px solid transparent; | ||
| color: black; | ||
| padding: 20px; | ||
| font-size: larger; | ||
| box-shadow: 0px 0px 14px 9px gray; | ||
|
|
||
| } | ||
| .container header{ | ||
| justify-self: center; | ||
| text-align: center; | ||
| font-size: xx-large; | ||
| font-weight: bolder; | ||
| padding-bottom: 0px; | ||
| } | ||
| input{ | ||
| height: 50px; | ||
| color: black; | ||
| width: 280px; | ||
| font-size: 40px; | ||
| border-radius: 20px; | ||
| padding: 20px; | ||
| border: 1px solid grey; | ||
| } | ||
| .refresh { | ||
| position: relative; | ||
| right: -223px; | ||
| top: -46px;} | ||
| .textcaptcha{ | ||
| margin-top: -62px; | ||
| @media only screen and (max-width: 400px) { | ||
| .container { | ||
| width: 90%; | ||
| padding: 15px; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,31 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset= "UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>CAPTCHA</title> | ||
| <link rel="stylesheet" href="captcha.css"> | ||
| <script src="https://kit.fontawesome.com/1f26e3c220.js" crossorigin="anonymous"></script> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Enhanced CAPTCHA</title> | ||
| <link rel="stylesheet" href="captcha.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <header>CAPTCHA </header> | ||
| <p>Enter value shown in below image</p> | ||
| <div class="image"> | ||
| <input type="text" value="x 5 f 0 t" disabled /><button class="refresh"><i class="fa-solid fa-rotate-right"></i></button> | ||
| <div class="container"> | ||
| <header>CAPTCHA</header> | ||
| <p>Select CAPTCHA type:</p> | ||
| <select id="captchaType"> | ||
| <option value="text">Text</option> | ||
| <option value="image">Image</option> | ||
| <option value="audio">Audio</option> | ||
| <option value="math">Math</option> | ||
| </select> | ||
| <div id="captchaContainer"></div> | ||
| <div class="textcaptcha"> | ||
| <input type="text" placeholder="Enter CAPTCHA"> | ||
| </div> | ||
| <button class="refresh">↻</button> | ||
| <p class="result"></p> | ||
| <div class="button"> | ||
| <button>Submit CAPTCHA</button> | ||
| </div> | ||
| </div> | ||
| <div class="textcaptcha"> | ||
| <input type="text" value="" placeholder="Enter captcha" /> | ||
| </div> | ||
| <div class="result">Entered Captcha is correct</div> | ||
| <div class="button"> | ||
| <button>Submit Captcha</button> | ||
| </div> | ||
| </div> | ||
| <script src="captcha.js"></script> | ||
| <script src="captcha.js"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.