PixCrypt.js Website
How do I make an pixcrypt.js website?
PixCrypt is a lightweight javascript library that encodes data into a small, 1-pixel-high image that can be exchanged and decoded much like a barcode. What is a pixcrypt.js website? How do you make a pixcrypt.js website? This script and codes were developed by Boylett on 20 August 2022, Saturday.
PixCrypt.js Website - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PixCrypt.js Website</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ @import url(http://fonts.googleapis.com/css?family=Artifika);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(reset.css);
body { background: #FAFAFA; font-family: "Open Sans", sans-serif; font-size: 16px; text-align: center; line-height: normal; color: #999 }
body > h1 { margin: 50px 0; font-family: "Artifika", serif; font-size: 400%; color: #BBB }
body > h1 > sub { color: #DDD; }
body > p { margin: 25px auto; width: 440px }
.download a { display: inline-block; padding: 7px 12px; background: #BBB; border-radius: 5px; text-decoration: none; color: #FFF }
.docs { margin: 50px auto; width: 420px; padding: 10px; background: #EEE; border: 1px solid #CCC; border-radius: 5px; text-align: left }
.docs > pre { padding: 5px; margin: 10px 0; font-family: "Courier New", monospace; font-size: 11px; background: #FFF; border: 1px dotted #CCC; border-radius: 5px }
.docs > small { font-size: 12px }
.copyright { margin: 50px auto; font-size: 11px; color: #CCC }
.copyright a { color: #AAA; text-decoration: none } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- You can view the actual site at http://pixcrypt.co.uk/
-->
<h1>PixCrypt<sub>.js</sub></h1>
<p>PixCrypt is a lightweight javascript library that encodes data into a small, 1-pixel-high image that can be exchanged and decoded much like a barcode.</p>
<p>PixCrypt was primarily built to store mouse movement heatmaps without taking up too much memory.</p>
<p class="download"><a href="http://pixcrypt.co.uk/pixcrypt.js" download="pixcrypt.js">Download 1.0.2</a></p>
<div class="docs"> Usage Examples <pre>
var pix = new Pixcrypt(), encoded = pix.encode({ foo: 'bar' });
$('<img />').attr('src', encoded);
</pre> <small>Standard objects, strings and numbers can be encoded and decoded</small> <pre>
var pix = new Pixcrypt(), decoded = pix.decode($('img')[0]);
console.log(decoded);
</pre> <small>Passing an image element will attempt to decrypt its contents</small> <pre>
var pix = new Pixcrypt(), decoded = pix.decode('data:image/png;base64,...');
console.log(decoded);
</pre> <small>PixCrypt is not dependend on jQuery, but is very much dependent on the <canvas> element.</small>
</div>
<p class="copyright">PixCrypt © <a href="http://ryanboylett.co.uk/">Ryan Boylett</a> 2013 - 2014</p>
</body>
</html>
PixCrypt.js Website - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Artifika);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(reset.css);
body { background: #FAFAFA; font-family: "Open Sans", sans-serif; font-size: 16px; text-align: center; line-height: normal; color: #999 }
body > h1 { margin: 50px 0; font-family: "Artifika", serif; font-size: 400%; color: #BBB }
body > h1 > sub { color: #DDD; }
body > p { margin: 25px auto; width: 440px }
.download a { display: inline-block; padding: 7px 12px; background: #BBB; border-radius: 5px; text-decoration: none; color: #FFF }
.docs { margin: 50px auto; width: 420px; padding: 10px; background: #EEE; border: 1px solid #CCC; border-radius: 5px; text-align: left }
.docs > pre { padding: 5px; margin: 10px 0; font-family: "Courier New", monospace; font-size: 11px; background: #FFF; border: 1px dotted #CCC; border-radius: 5px }
.docs > small { font-size: 12px }
.copyright { margin: 50px auto; font-size: 11px; color: #CCC }
.copyright a { color: #AAA; text-decoration: none }
Developer | Boylett |
Username | boylett |
Uploaded | August 20, 2022 |
Rating | 4 |
Size | 2,998 Kb |
Views | 30,360 |
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!
Name | Size |
Time Tracker Widget by Martin David | 3,547 Kb |
HTML5 Drawing Studio | 46,525 Kb |
Particle Demo | 3,171 Kb |
Simple Progressbar | 2,360 Kb |
Notification Bell | 2,383 Kb |
Countdown by David Jones | 2,871 Kb |
Procreate File Viewer | 0 Kb |
Music Player by Sebastian Beltz | 5,782 Kb |
Food Widget by Andreea Nicolaescu | 5,071 Kb |
Animation Experiment | 2,218 Kb |
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!
Name | Username | Size |
BabyStore | Pablo-Ai | 3,807 Kb |
Button shaking | SusanneLundblad | 2,227 Kb |
Ghost | Mghayour | 11,738 Kb |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
Responsive Boxes without Images | Andymcfee | 4,120 Kb |
Responsive slide | Thorien | 2,400 Kb |
Speech bubbles | Something | 1,547 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Javascript Welcome | Peterlewicki | 1,573 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!