Versuche, den Farbcode zu erraten . Die Nähe des richtigen Codes wird als Prozentzahl angezeigt. Versuche mindestens 99% Übereinstimmung zu erreichen
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>What the color? - A color game for web developers!</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
font: 100%/1.5 sans-serif;
padding: 1em;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
a {
color: inherit;
}
h1 + p {
padding: 1em 0;
}
#colors {
display: inline-block;
overflow: hidden;
border: 10px solid white;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#colors .color {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
background: linear-gradient(45deg, silver 25%, transparent 25%, transparent 75%, silver 75%),
linear-gradient(45deg, silver 25%, transparent 25%, transparent 75%, silver 75%) 10px 10px;
background-color: #eee;
background-size: 20px 20px;
}
#colors .color button {
padding: .35em .8em .4em;
border: 1px solid rgba(0,0,0,.3);
border-radius: .2em;
margin-top: 2em;
outline: none;
background: yellowgreen linear-gradient(yellowgreen, hsl(80,80%,35%));
box-shadow: 0 1px hsla(0,0%,100%,.8) inset, 0 4px 8px -2px black;
color: hsl(80,80%,20%);
text-shadow: 0 1px 1px white;
font-size: 150%;
}
#solution {
float: left;
}
#yourcolor {
float: right;
}
#colors .color:before {
content: attr(title);
position: absolute;
bottom: 0;
left: 0; right: 0;
padding: .5em .8em .6em;
background: rgba(0,0,0,.5);
color: white;
text-shadow: 0 0 2px black;
font-size: smaller;
font-weight: bold;
}
#attempt, code {
font-family: Consolas, Monaco, monospace;
}
#attempt {
display: block;
padding: .3em .5em;
border: 1px solid rgba(0,0,0,.5);
border-radius: .3em;
outline: none;
margin: 1em auto;
font-size: 150%;
}
#attempt:focus {
box-shadow: 0 1px 5px rgba(0,0,0,.4) inset;
}
#attempt.invalid {
background: #fdd;
}
.hint {
max-width: 30em;
margin: auto;
font-size: smaller;
color: gray;
}
#proximity {
position: absolute;
top: .5rem;
left: 50%;
margin-left: 160px;
width: 4em;
height: 4em;
padding: 1.1em .5em;
box-sizing: border-box;
border-radius: 50%;
background: black;
text-align: center;
color: white;
font-size: 160%;
line-height: 1;
font-weight: bold;
letter-spacing: -1px;
box-shadow: 0 1px 5px rgba(0,0,0,.5), 0 0 0 4px rgba(0,0,0,.1) inset;
}
#proximity.success {
background: hsl(90, 80%, 35%);
}
#proximity.close-0\% {
background: darkred;
}
#proximity.close-10\% {
background: red;
}
#proximity.close-20\%,
#proximity.close-30\% {
background: hsl(20, 100%, 50%);
}
#proximity.close-40\%,
#proximity.close-50\% {
background: hsl(30, 100%, 50%);
}
#proximity.close-60\% {
background: hsl(40, 100%, 45%);
}
#proximity.close-70\% {
background: hsl(50, 100%, 45%);
}
#proximity.close-80\% {
background: hsl(65, 100%, 40%);
}
#proximity.close-90\% {
background: hsl(75, 100%, 40%);
}
#proximity:before {
content: attr(data-label);
display: block;
margin-bottom: .4em;
font-size: 50%;
line-height: 1;
font-weight: normal;
letter-spacing: 0;
}
.message {
display: none;
width: 24em;
padding: .5em .8em;
margin: 1em auto;
border-radius: .15em;
}
.message.show {
display: block;
}
.message a,
#successes #tweet {
display: inline-block;
padding: .2em .5em;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3em;
background: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0));
box-shadow: 0 1px hsla(0,0%,100%,.6) inset;
color: white;
text-decoration: none;
}
.message a {
text-transform: uppercase;
font-size: 80%;
}
.message a:active,
#successes #tweet:active {
background-image: none;
box-shadow: 0 1px 5px rgba(0,0,0,.6) inset;
}
p#success {
border: 1px solid hsl(80,100%,45%);
background: hsl(80,100%,90%);
color: hsl(80,100%,20%);
}
p#success a {
background-color: hsl(80,100%,30%);
}
p#slow {
border: 1px solid hsl(0, 100%, 70%);
background: hsl(0, 100%, 90%);
color: hsl(0, 100%, 20%);
}
p#slow a {
background-color: hsl(0, 100%, 30%);
}
#timer {
margin: .5em 0;
font-size: 250%;
}
#successes {
display: none;
width: 12em;
background: #eee;
}
#successes.show {
display: block;
}
#successes .color {
padding: .1em;
font-size: 200%;
font-weight: 100;
}
#successes #tweet {
margin: 1em auto;
font-weight: bold;
background-color: #112;
font-size: 120%;
letter-spacing: -1px;
text-shadow: 0 -1px 2px black;
}
.twitter-share-button {
position: absolute;
left: 2em;
top: 32em;
}
#ad {
max-width: 25em;
margin: 1em auto;
}
/* Ad packs */
.bsa_it_ad {
padding:10px !important;
font: inherit !important;
overflow: hidden;
}
.bsa_it_i {
display:block;
float:none;
margin: 0 10px 5px 0 !important;
}
.bsa_it_ad img {
padding:0;
border:none;
}
.bsa_it_ad .bsa_it_t {
padding:1px 0 0 0;
}
.bsa_it_d {
font-size: 70% !important;
}
.bsa_it_p {
display: none !important;
}
#bsap_aplink {
display:block;
font-size:10px;
margin: 0 15px 0;
text-align: right;
text-decoration: none;
}
footer {
margin-top: 1em;
}
#progression {
display: flex;
width: 25em;
height: 2em;
margin: auto;
margin-bottom: .5em;
}
#progression > div {
flex: 1;
}
</style>
</head>
<body>
<section id="successes">
</section>
<script src="/js_webseite/whathecolor.js" type="module"></script>
<div id="colors">
<div id="solution" class="color" title="Color to guess">
<button onclick="this.parentNode.removeChild(this); Whathecolor.play();" autofocus>Play!</button></div>
<div id="yourcolor" class="color" title="Your guess"></div>
</div>
<input id="attempt" placeholder="rgb(), hsl() etc" />
<output id="proximity" data-label="Proximity">0%</output>
<p id="timer">00:00.0</p>
<div id="progression_container">
Dein Fortschritt:
<div id="progression"></div>
</div>
<p id="success" class="message">
Yay! Du hast es!
<a href="#">Next</a>
</p>
<p id="slow" class="message">
Looks like this color is taking you a bit long. Wanna skip it?
<a href="#">Skip</a>
</p>
<p class="hint">
Jede von Ihrem Browser unterstützte CSS-Farbnotation ist gültig,
einschließlich benannter Farben, #hex, rgb()usw. hsl()Außerdem werden
Farbformate der CSS-Ebene 4 unterstützt, selbst wenn Ihr Browser sie nicht unterstützt.
Verwenden Sie die Aufwärts-/Abwärtspfeiltasten auf der Tastatur, um Zahlen zu erhöhen/verringern.
</p>
</body>
</html>