Versuche den Code zu knacken , ohne in den Quelltext zu schauen.
Code
<html>
<head>
<style>
html {
overflow: hidden;
}
body {
text-align: center;
background-color: #222222;
padding: 10px;
}
DIV {
box-sizing: border-box;
}
#rotors {
padding: 20px;
margin: 0px auto;
width: 280px;
cursor: pointer;
}
.rotor {
float: left;
margin:0px 20px;
width:30px;
height:130px;
border: 4px solid black;
border-radius: 5px;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(42,42,42,1) 2%, rgba(245,245,245,1) 28%, rgba(52,52,52,1) 30%, rgba(216,216,216,1) 31%, rgba(255,255,255,1) 50%, rgba(212,212,212,1) 67%, rgba(45,45,45,1) 69%, rgba(226,226,226,1) 70%, rgba(42,42,42,1) 98%, rgba(0,0,0,1) 100%);
}
.letter {
font-family: Tahoma;
color: #222222;
font-size: 12pt;
padding-top: 11px;
padding-bottom: 11px;
text-shadow: 0px 1px #AAAAAA;
}
.nextLetter:hover {
background-color: rgba(0,0,0,0.6);
background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0,0,0,0.6)', endColorstr='rgba(0,0,0,0)',GradientType=0 );
}
.previousLetter:hover {
background-color: rgba(0,0,0,0.6);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0,0,0,0.6)', endColorstr='rgba(0,0,0,0)',GradientType=0 );
}
.currentLetter:hover {
background-color: rgba(0,0,0,0.3);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0,0,0,0.6)', endColorstr='rgba(0,0,0,0)',GradientType=0 );
}
#padlock {
margin: 160px auto 20px auto;
width: 250px;
border-radius:10px;
background: rgba(241,231,103,1);
background: -moz-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
background: -webkit-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: -o-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: -ms-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=1 );
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
#unlock {
clear: both;
margin: 20px auto;
width:160px;
height:40px;
border: 4px solid black;
border-radius: 5px;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(42,42,42,1) 2%, rgba(245,245,245,1) 28%, rgba(216,216,216,1) 31%, rgba(255,255,255,1) 50%, rgba(212,212,212,1) 67%, rgba(226,226,226,1) 70%, rgba(42,42,42,1) 98%,
rgba(0,0,0,1) 100%);
}
#unlock:hover {
cursor: pointer;
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(30,30,30,1) 2%, rgba(230,230,230,1) 28%, rgba(200,200,200,1) 31%, rgba(230,230,230,1) 50%, rgba(200,200,200,1) 67%, rgba(200,200,200,1) 70%, rgba(20,20,20,1) 98%,
rgba(0,0,0,1) 100%);
}
#unlock:active {
border: 4px solid #222222;
}
#padlock.unlock::before {
transform: translate(-50%, -60%);
}
#padlock.unlock::after {
transform: translate(-50%, calc(-50% - 15px)) rotate(90deg);
}
#padlock::before {
content: "";
position: absolute;
left: 50%;
z-index: -1;
width: 100px;
height: 200px;
border-radius: 125px;
border: 36px solid #AAAAAA;
-webkit-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.75);
box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.75);
transform: translate(-50%, -50%);
transition: transform 300ms cubic-bezier(0.17, 0.67, 0.65, 1.52);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 50% 65%, 50% 57%, 22% 57%, 22% 51%, 15% 51%, 14% 52%, 14% 53%, 15% 54%, 22% 54%, 18% 57%, 2% 57%, 0% 55%);
clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 50% 65%, 50% 57%, 22% 57%, 22% 51%, 15% 51%, 14% 52%, 14% 53%, 15% 54%, 22% 54%, 18% 57%, 2% 57%, 0% 55%);
}
.popup{
width: 100%;
position: absolute;
top: 110px;
z-index: 101;
}
.message{
min-width: 80%;
width: 80%;
min-height: 150px;
margin: 80px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.message p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.message p a{
color: #d91900;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="padlock">
<div id="rotors">
<div class="rotor" id="rotor1">
<div class="letter nextLetter" id="rotor1Next" onclick="changeRotor(1,-1);">9</div>
<div class="letter currentLetter" id="rotor1Current">0</div>
<div class="letter previousLetter" id="rotor1Previous" onclick="changeRotor(1,1);">1</div>
</div>
<div class="rotor" id="rotor2">
<div class="letter nextLetter" id="rotor2Next" onclick="changeRotor(2,-1);">9</div>
<div class="letter currentLetter" id="rotor2Current">0</div>
<div class="letter previousLetter" id="rotor2Previous" onclick="changeRotor(2,1);">1</div>
</div>
<div class="rotor" id="rotor3">
<div class="letter nextLetter" id="rotor3Next" onclick="changeRotor(3,-1);">9</div>
<div class="letter currentLetter" id="rotor3Current">0</div>
<div class="letter previousLetter" id="rotor3Previous" onclick="changeRotor(3,1);">1</div>
</div>
</div>
<button id="unlock" onclick="unlock();">Unlock?</button>
</div>
<div class="popup" id="popup1" style="display: none;">
<div class="message">
<h1>Wrong Code!</h1>
<p>
Please try again with a different code.
<br>
<br>
<a class="close" onclick="document.getElementById('popup1').style.display='none';">Close</a>
</p>
</div>
</div>
<div class="popup" id="popup2" style="display: none;">
<div class="message">
<h1>Correct Code!</h1>
<p>
You have found the correct combination! Challenge solved!.
<br>
<br>
<a class="close" onclick="document.getElementById('popup2').style.display='none';">Close</a>
</p>
</div>
</div>
<!--
<input type="button" onclick="replay()" value="Neuer Versuch">
-->
<script>document.addEventListener('contextmenu', event => event.preventDefault());</script>
<script>
function getRandomInt(max) {
dd=Math.floor(Math.random() * Math.floor(max));
console.log(dd);
return dd;
}
var numbers = [0,0,0];
var pass = [1,1,1];//[getRandomInt(9),getRandomInt(9),getRandomInt(9)];
function changeRotor(rotor,step) {
var num = (numbers[rotor-1]-step)%10;
if (num==-1) num=9;
numbers[rotor-1] = num;
document.getElementById("rotor"+rotor+"Current").innerText=num;
document.getElementById("rotor"+rotor+"Previous").innerText=(num+1)%10;
num = (num-1)%10;
if (num==-1) num=9;
document.getElementById("rotor"+rotor+"Next").innerText=num;
}
function unlock() {
if ((numbers[0]==pass[0]) && (numbers[1]==pass[1]) && (numbers[2]==pass[2])) {
document.getElementById("padlock").className = "unlock";
document.getElementById("popup1").style.display = "none";
document.getElementById("popup2").style.display = "block";
} else {
document.getElementById("popup2").style.display = "none";
document.getElementById("popup1").style.display = "block";
}
}
</script>