DumbLock Security

Developer
Andy Hoffman
Size
3,093 Kb
Views
36,432
  1. DumbLock Security Previews
  2. DumbLock Security HTML Codes
  3. DumbLock Security CSS Codes
  4. DumbLock Security JS Codes

How do I make an dumblock security?

What is a dumblock security? How do you make a dumblock security? This script and codes were developed by Andy Hoffman on 24 August 2022, Wednesday.

DumbLock Security Previews
IQ Test

DumbLock Security - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DumbLock Security</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <clipPath id="cut-off-bottom"> <rect x="0" y="0" width="100" height="100" />
</clipPath>
<h1>DumbLock Security, LLC</h1>
<div class="wrapper"> <svg version="1.1" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg" > <clipPath id="cut-off-bottom"> <rect x="0" y="-30" width="200" height="100" /> </clipPath> <circle id="circle" fill="none" stroke="#4b4d57" stroke-width="14" cx="100" cy="80" r="60" clip-path="url(#cut-off-bottom)" /> <rect x="0" y="70" width="200" height="160" rx="0" ry="0" fill="#4b4d57" /> </svg> <form> <input autocapitalize="off" type="text" name="field1" placeholder="unlock" /> <input type="password" name="field2" placeholder="1234" /> <input type="submit" value="Open" /> </form>
</div>
<img class="bars" src="http://www.stlmugshots.com/assets/img/bars.png" alt="" /> <script src="js/index.js"></script>
</body>
</html>

DumbLock Security - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Francois+One');
body { padding: 0;margin: 0; font-family: 'Francois One', sans-serif; background: rgba(122, 122, 222, 0.5);
}
h1 { position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap;
}
.wrapper, form { z-index: 1; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 200px;
}
#circle { -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transition: 0.5s -webkit-transform ease-in-out; transition: 0.5s -webkit-transform ease-in-out; transition: 0.5s transform ease-in-out; transition: 0.5s transform ease-in-out, 0.5s -webkit-transform ease-in-out;
}
#circle.opened { -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
/* stolen form styles */
form { font: 95% Arial, Helvetica, sans-serif; max-width: 400px; margin: 10px auto; padding: 16px; background: #F7F7F7; width: 100px; top: 54%;
}
form h1{ background: #43D1AF; padding: 20px 0; font-size: 140%; font-weight: 300; text-align: center; color: #fff; margin: -16px -16px 16px -16px;
}
form input[type="text"],
form input[type="date"],
form input[type="datetime"],
form input[type="password"],
form input[type="number"],
form input[type="search"],
form input[type="time"],
form input[type="url"],
form textarea,
form select
{ -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; background: #fff; margin-bottom: 4%; border: 1px solid #ccc; padding: 3% 5%; color: #555; font: 95% Arial, Helvetica, sans-serif;
}
form input[type="text"]:focus,
form input[type="date"]:focus,
form input[type="datetime"]:focus,
form input[type="password"]:focus,
form input[type="number"]:focus,
form input[type="search"]:focus,
form input[type="time"]:focus,
form input[type="url"]:focus,
form textarea:focus,
form select:focus
{ box-shadow: 0 0 5px #43D1AF; padding: 3% 5%; border: 1px solid #43D1AF;
}
form input[type="submit"],
form input[type="button"]{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 3%; background: #43D1AF; border-bottom: 2px solid #30C29E; border-top-style: none; border-right-style: none; border-left-style: none; color: #fff;
}
form input[type="submit"]:hover,
form input[type="button"]:hover{ background: #2EBC99;
}
.bars { position: absolute; top: 0; -webkit-transition: 0.3s -webkit-transform; transition: 0.3s -webkit-transform; transition: 0.3s transform; transition: 0.3s transform, 0.3s -webkit-transform; will-change: transform; -webkit-transform: translateY(-200%); transform: translateY(-200%); pointer-events: none;
}
.on .bars { -webkit-transform: translateY(30%); transform: translateY(30%); opacity: 0.5;
}

DumbLock Security - Script Codes JS Codes

var form = document.querySelector('form');
var circle = document.querySelector('#circle');
var bars = document.querySelector('.bars');
form.addEventListener('submit', formSubmit, false);
bars.addEventListener('transitionend', barsDoneMoving, false);
function barsDoneMoving(e) { if (!document.body.classList.contains('on')) { circle.classList.add('opened'); } else { circle.classList.remove('opened'); }
}
function formSubmit(e) { e.preventDefault(); var field1 = document.querySelector('[name=field1]').value; var field2 = document.querySelector('[name=field2]').value; if (field1 === 'unlock' && field2 === '1234') { if (document.body.classList.contains('on')) { document.body.classList.remove('on'); } else { circle.classList.add('opened'); } } else { if (!document.body.classList.contains('on')) { document.body.classList.add('on'); } else { circle.classList.remove('opened'); } }
}
DumbLock Security - Script Codes
DumbLock Security - Script Codes
Home Page Home
Developer Andy Hoffman
Username antibland
Uploaded August 24, 2022
Rating 3
Size 3,093 Kb
Views 36,432
Do you need developer help for DumbLock Security?

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!

Andy Hoffman (antibland) Script Codes
Name
Working with jQuery Marquee plugin
Flexbox 3-Column Layout
Swaying Vertical Tabs
Here today
Full page image fade in
Plain Text Contenteditable
Skewed Frame
Animate fill color via currentColor
ToDo With Strikethrough
Active Buttons
Create amazing captions 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!