CSS Bot Confusion

Developer
James Podles
Size
3,456 Kb
Views
14,168
  1. CSS Bot Confusion Previews
  2. CSS Bot Confusion HTML Codes
  3. CSS Bot Confusion CSS Codes
  4. CSS Bot Confusion JS Codes

How do I make an css bot confusion?

Rearranges the letters in a captcha word with CSS. Click the "View as bot" link to see things from a spambot's perspective.. What is a css bot confusion? How do you make a css bot confusion? This script and codes were developed by James Podles on 23 November 2022, Wednesday.

CSS Bot Confusion Previews
IQ Test

CSS Bot Confusion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Bot Confusion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #335778;
}
* { box-sizing: border-box;
}
form { width: 320px; border: 1px solid #fafafa; margin: 5em auto 0; padding: 2em; background: #fafafa; color: #444; border-radius: 3px;
}
.captcha { padding-left: 2em; text-align: center; display: block; margin-bottom: .5em; font-size: 2em; letter-spacing: 8px;
}
.captcha::first-letter { position: relative; margin-right: -3.6em;
}
input[type="text"] { display: block; width: 100%; margin-bottom: 1em; border-radius: 4px; border: 1px solid #aaa; padding: 5px;
}
input[type="submit"] { background: #364D8F; color: #fff; border: none; border-radius: 3px; padding: 5px 10px;
}
.notice { position: absolute; top: 0; left: 0; display: block; width: 100%; background: #fafafa; font-size: 1.4em; text-align: center; padding: .5em; color: #328580; font-weight: 700;
}
#bot { color: inherit; text-decoration: none; background: #fafafa; border-radius: 3px; display: block; margin: 5em auto 0; width: 120px; padding: 5px 10px; text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <form> <span class="captcha"> EBLU </span> <input id="captcha" type="text" placeholder="Enter Above Word"> <input type="submit" value="submit"> </form>
<a href="#" id="bot">View as bot</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Bot Confusion - Script Codes CSS Codes

body { background: #335778;
}
* { box-sizing: border-box;
}
form { width: 320px; border: 1px solid #fafafa; margin: 5em auto 0; padding: 2em; background: #fafafa; color: #444; border-radius: 3px;
}
.captcha { padding-left: 2em; text-align: center; display: block; margin-bottom: .5em; font-size: 2em; letter-spacing: 8px;
}
.captcha::first-letter { position: relative; margin-right: -3.6em;
}
input[type="text"] { display: block; width: 100%; margin-bottom: 1em; border-radius: 4px; border: 1px solid #aaa; padding: 5px;
}
input[type="submit"] { background: #364D8F; color: #fff; border: none; border-radius: 3px; padding: 5px 10px;
}
.notice { position: absolute; top: 0; left: 0; display: block; width: 100%; background: #fafafa; font-size: 1.4em; text-align: center; padding: .5em; color: #328580; font-weight: 700;
}
#bot { color: inherit; text-decoration: none; background: #fafafa; border-radius: 3px; display: block; margin: 5em auto 0; width: 120px; padding: 5px 10px; text-align: center;
}

CSS Bot Confusion - Script Codes JS Codes

$(document).ready(function(){ $('form').submit(function(e){ e.preventDefault(); var captchaValue = $('#captcha').val(); captchaValue = captchaValue.toLowerCase(); if (captchaValue == 'blue') { $('body').append('<span class="notice">Success!</span>'); } else if (captchaValue == 'eblu') { alert('You are a robot!'); } else { $('body').append('<span class="notice">Try the captcha again</span>'); } }); $('#bot').click(function(e){ e.preventDefault(); $('head link, head style').remove(); $('#captcha').val(''); $('.notice').remove(); $(this).remove(); });
});
CSS Bot Confusion - Script Codes
CSS Bot Confusion - Script Codes
Home Page Home
Developer James Podles
Username jpod
Uploaded November 23, 2022
Rating 3
Size 3,456 Kb
Views 14,168
Do you need developer help for CSS Bot Confusion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Podles (jpod) Script Codes
Name
PracticeIO Click Counter
PracticeIO Cello
JQuery Tooltip Plugin
Soft Progress bar
Band Name Generator
Scrambled City
Flyer-flip
SoundCloud CoverFlow
Adaptive Text Color
LED Social Icons
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!