<!-- try the no-symbol key ;) -->
<div class="super">
<div class="case">
<!-- 1 row -->
<div class="key" data-key="esc"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="key" data-key="f1"></div>
<div class="key" data-key="f2"></div>
<div class="key" data-key="f3"></div>
<div class="key" data-key="f4"></div>
<div class="gap"></div>
<div class="key" data-key="f5"></div>
<div class="key" data-key="f6"></div>
<div class="key" data-key="f7"></div>
<div class="key" data-key="f8"></div>
<div class="gap"></div>
<div class="key" data-key="f9"></div>
<div class="key" data-key="f10"></div>
<div class="key" data-key="f11"></div>
<div class="key" data-key="f12"></div>
<div class="gap"></div>
<div class="key" data-key="prtSc"></div>
<div class="key" data-key="scrLk"></div>
<div class="key" data-key="break"></div>
<div class="gap"></div>
<canvas id="canvas1"></canvas>
<!-- 2 row -->
<div class="key" data-key="\"></div>
<div class="key" data-key="1"></div>
<div class="key" data-key="2"></div>
<div class="key" data-key="3"></div>
<div class="key" data-key="4"></div>
<div class="key" data-key="5"></div>
<div class="key" data-key="6"></div>
<div class="key" data-key="7"></div>
<div class="key" data-key="8"></div>
<div class="key" data-key="9"></div>
<div class="key" data-key="0"></div>
<div class="key" data-key="'"></div>
<div class="key" data-key="«"></div>
<div class="key large" data-key="backspace">-----</div>
<div class="gap"></div>
<div class="key" data-key="ins"></div>
<div class="key" data-key="home"></div>
<div class="key" data-key="pgUp"></div>
<div class="gap"></div>
<div class="key" data-key="num"></div>
<div class="key" data-key="/"></div>
<div class="key" data-key="*"></div>
<div class="key" data-key="-"></div>
<!-- 3 row -->
<div class="key medium" data-key="tab"></div>
<div class="key" data-key="q"></div>
<div class="key" data-key="w"></div>
<div class="key" data-key="e"></div>
<div class="key" data-key="r"></div>
<div class="key" data-key="t"></div>
<div class="key" data-key="y"></div>
<div class="key" data-key="u"></div>
<div class="key" data-key="i"></div>
<div class="key" data-key="o"></div>
<div class="key" data-key="p"></div>
<div class="key" data-key="+"></div>
<div class="key" data-key="´"></div>
<div class="key medium" data-key="enter"></div>
<div class="gap"></div>
<div class="key" data-key="del"></div>
<div class="key" data-key="end"></div>
<div class="key" data-key="pgDn"></div>
<div class="gap"></div>
<div class="key" data-key="7"></div>
<div class="key" data-key="8"></div>
<div class="key" data-key="9"></div>
<div class="key vertical" data-key="+"></div>
<!-- 4 row -->
<div class="key large" data-key="capslock">caps</div>
<div class="key" data-key="a"></div>
<div class="key" data-key="s"></div>
<div class="key" data-key="d"></div>
<div class="key" data-key="f"></div>
<div class="key" data-key="g"></div>
<div class="key" data-key="h"></div>
<div class="key" data-key="j"></div>
<div class="key" data-key="k"></div>
<div class="key" data-key="l"></div>
<div class="key" data-key="ç"></div>
<div class="key" data-key="º"></div>
<div class="key" data-key="~"></div>
<div id="toggleVis" class="key" data-key="enterAux"> </div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="key" data-key="4"></div>
<div class="key" data-key="5"></div>
<div class="key" data-key="6"></div>
<!-- 5 row -->
<div class="key" data-key="shiftLeft">shift</div>
<div class="key" data-key="<"></div>
<div class="key" data-key="z"></div>
<div class="key" data-key="x"></div>
<div class="key" data-key="c"></div>
<div class="key" data-key="v"></div>
<div class="key" data-key="b"></div>
<div class="key" data-key="n"></div>
<div class="key" data-key="m"></div>
<div class="key" data-key=","></div>
<div class="key" data-key="."></div>
<div class="key" data-key="-"></div>
<div class="key xxl" data-key="shiftRight">shift</div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="key" data-key="arrowUp">▲</div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="key" data-key="1"></div>
<div class="key" data-key="2"></div>
<div class="key" data-key="3"></div>
<div class="key vertical" data-key="enterNum">↵</div>
<!-- 6 row -->
<div class="key medium" data-key="ctrlLeft">ctrl</div>
<div class="key" data-key="meta"></div>
<div class="key medium" data-key="altLeft">alt</div>
<div class="key huge" data-key="spacebar">____</div>
<div class="key medium" data-key="altGr"></div>
<div class="key" data-key="fn"></div>
<div class="key" data-key="listKey">list</div>
<div class="key medium" data-key="ctrlRight">ctrl</div>
<div class="gap"></div>
<div class="key" data-key="arrowLeft">◀</div>
<div class="key" data-key="arrowDown">▼</div>
<div class="key" data-key="arrowRight">▶</div>
<div class="gap"></div>
<div class="key large" data-key="0"></div>
<div class="key" data-key="."></div>
</div>
</div>
.super{
height: 200px
}
body {
/* background-color: #625499; */
display: table-cell;
height: 100vh;
margin: 0;
text-align: center;
vertical-align: middle;
width: 100vw;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.case {
background-color: #463973;
border-color: #2e2640;
border-radius: 5px;
border-style: solid;
border-width: 8px 10px 15px 10px;
display: inline-grid;
grid-template-columns: repeat(46, 1fr);
grid-template-rows: repeat(6, 1fr);
height: 20em;
padding: 5px;
user-select: none;
width: 80em;
}
.key {
border-color: #382e59 #2e2640;
border-radius: 2px;
border-style: solid;
border-width: 3px 5px 8px 5px;
color: #bbadd9;
display: block;
font-family: sans-serif;
font-size: 7px;
font-weight: 800;
grid-column-end: span 2;
margin: 3px;
padding-top: 2px;
padding: 5px;
text-align: center;
text-transform: uppercase;
transition: all 50ms ease-out;
will-change: box-shadow, color, text-shadow;
}
.key:empty::before {
content: attr(data-key);
}
.active {
transform: perspective(1200px) translateZ(-90px);
}
.medium {
grid-column-end: span 3;
}
.large {
grid-column-end: span 4;
}
.xl {
grid-column-end: span 5;
}
.xxl {
grid-column-end: span 6;
}
.xxxl {
grid-column-end: 7;
}
.huge {
grid-column-end: span 12;
}
.vertical {
grid-row-end: span 2;
}
/* canvas {
background-color: #463973;
position: absolute;
height: 8.5vh;
width: 10.5vw;
border-radius: 2px;
} */
canvas {
background-color: #463973;
color: #bbadd9;
transition: all 50ms ease-out;
will-change: box-shadow, color, text-shadow;
padding-top: 2px;
padding: 5px;
border-color: #382e59 #2e2640;
border-style: solid;
border-radius: 2px;
grid-column-end: span 8;
display: block;
position: relative;
top: 0;
left: 0;
width: 12.6em;
height: 2em;
margin: 3px;
}
/* #click {
padding: 1em;
} */// try the no-symbol key ;) -
const NUMBER_OF_NODES = 25;
const TRIGGER_THRESHOLD = 50;
const triggered = [];
const audioCtx = new AudioContext();
const data = new Uint8Array(NUMBER_OF_NODES * 4);
const analyserNode = new AnalyserNode(audioCtx, {
fftSize: 256, //2 ** 8,
maxDecibels: -20,
minDecibels: -70,
smoothingTimeConstant: 0.6
});
function updateVisualizer() {
try {
requestAnimationFrame(updateVisualizer);
analyserNode.getByteFrequencyData(data);
updateCanvas(data);
}
catch (e) { //what is this?
throw e;
}
}
function startStream() {
return navigator.mediaDevices
.getUserMedia({ audio: true, video: false })
.then(stream => audioCtx.createMediaStreamSource(stream))
.then(source => {
source.connect(analyserNode);
})
.then(updateVisualizer);
}
var toggleVis = 1;
//tesssst
var input1 = document.getElementById("toggleVis");
input1.addEventListener("click", (event) => {
if(toggleVis){
audioCtx.resume();
startStream();
toggleVis=0;
}
else{
audioCtx.suspend();
startStream();
toggleVis=1;}
});
/* ---------------------------------- */
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
let width = canvas.width,
height = canvas.height;
// document.case.appendChild(canvas);
function updateCanvas(data) {
// ctx.clearRect(0, 0, width, height);
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.1;
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 1;
// ctx.globalCompositeOperation = 'screen';
if (data) {
let w = width / NUMBER_OF_NODES;
let halfHeight = height / 2;
ctx.beginPath();
ctx.moveTo(-20, height);
for (var i = 0; i < NUMBER_OF_NODES; i += 2) {
let x1 = i * w;
let y1 = height - height * (data[i] / 255);
let x2 = (i + 1) * w;
let y2 = height - height * (data[i + 1] / 255);
ctx.quadraticCurveTo(x1, y1, x2, y2);
}
ctx.lineTo(width + 20, height);
ctx.closePath();
ctx.fillStyle = "#2e2640";
ctx.strokeStyle = "#463973";
ctx.lineWidth = 10;
ctx.globalAlpha = 0.2;
ctx.fill();
ctx.globalAlpha = 0.5;
ctx.stroke();
/* ---------------------------------- */
ctx.beginPath();
ctx.moveTo(width + 20, height);
for (var i = 0; i < NUMBER_OF_NODES; i += 2) {
let x1 = width - i * w;
let y1 = height - height * (data[i] / 255);
let x2 = width - (i + 1) * w;
let y2 = height - height * (data[i + 1] / 255);
ctx.quadraticCurveTo(x1, y1, x2, y2);
}
ctx.lineTo(-20, height);
ctx.closePath();
ctx.fillStyle = "#2e2640";
ctx.strokeStyle = "#463973";
ctx.lineWidth = 10;
ctx.globalAlpha = 0.2;
ctx.fill();
ctx.globalAlpha = 0.5;
ctx.stroke();
}
}
updateCanvas();
// keyboard
const keysArr = [...document.querySelectorAll(".key")];
const getKey = (event) => {
const parsedKey = event.key.toLowerCase().replace("\\", "\\\\");
const parsedCode = event.code.toLowerCase();
const element =
document.querySelector(`[data-key="${parsedCode}"]`) ||
document.querySelector(`[data-key="${parsedKey}"]`);
return element;
};
document.addEventListener("keydown", (event) => {
const key = getKey(event);
if (key) {
key.classList.add("active");
}
});
document.addEventListener("keyup", (event) => {
const key = getKey(event);
if (key) {
key.classList.remove("active");
}
});
document.addEventListener("mousedown", (event) => {
if (event.target.dataset.key) {
event.target.classList.add("active");
}
});
document.addEventListener("mouseup", (event) => {
if (event.target.dataset.key) {
event.target.classList.remove("active");
}
});
document.addEventListener("touchstart", (event) => {
if (event.target.dataset.key) {
event.target.classList.add("active");
}
});
document.addEventListener("touchend", (event) => {
if (event.target.dataset.key) {
event.target.classList.remove("active");
}
});
const animate = (element) => {
const hueColor = Math.floor(Math.random() * (360 - 0 + 1)) + 0;
const color = `hsla(${hueColor}, 100%, 50%, 50%)`;
const textColor = `hsl(${hueColor}, 100%, 50%)`;
const textShadow = `0 0 0.80em ${color}, 0 0 1.60em ${color}, 0 0 4em ${color}`;
const boxShadow = `-3px 3px 4px ${color}, 3px -3px 4px ${color}, 3px 3px 4px ${color}, -3px -3px 4px ${color}, 0 0 10px ${color}`;
const keyIndex = keysArr.indexOf(element);
const animatedKeysRight = keysArr.slice(keyIndex);
const animatedKeysLeft = keysArr.slice(0, keyIndex);
const transitionHandler = (event) => {
event.target.style.boxShadow = "none";
event.target.style.color = null;
event.target.style.textShadow = "none";
event.target.removeEventListener("transitionend", transitionHandler);
};
animatedKeysRight.forEach((keyEl, i) => {
setTimeout(() => {
keyEl.addEventListener("transitionend", transitionHandler);
keyEl.style.boxShadow = boxShadow;
keyEl.style.color = textColor;
keyEl.style.textShadow = textShadow;
}, i * 35);
});
animatedKeysLeft.forEach((keyEl, j) => {
const i = animatedKeysLeft.length - j;
setTimeout(() => {
keyEl.addEventListener("transitionend", transitionHandler);
keyEl.style.boxShadow = boxShadow;
keyEl.style.color = textColor;
keyEl.style.textShadow = textShadow;
}, i * 35);
});
};
document.addEventListener("keydown", (event) => {
const key = getKey(event);
if (key) {
animate(key);
}
});
document.addEventListener("click", (event) => {
if (event.target.dataset.key) {
animate(event.target);
}
});
window.addEventListener("load", () => {
const key = document.querySelector(`[data-key="enter"]`);
animate(key);
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.