Skip to content

Instantly share code, notes, and snippets.

@codepedia-top

codepedia-top/index.pug

Created October 27, 2023 08:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save codepedia-top/370a4877ba5c973a21d481922c5d5490 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save codepedia-top/370a4877ba5c973a21d481922c5d5490 to your computer and use it in GitHub Desktop.
Download ZIP
3d keypad and monitor
Raw
index.pug
qwediv.main.flex#m
div.keyboard.flex#k
div.screen.flex#s
div.keyboard__front.face
div.keyboard__back.face
div.keyboard__right.face
div.keyboard__left.face
div.keyboard__top.face
//----------------------
div.keys
div.key.flex
div.key__front.face.face--key-b3
div.key__back.face.face--key-b1
div.key__right.face.face--key-b1
div.key__left.face.face--key-b2
div.key__top.face.face--key-b1
div.key__bottom.face.face--key-b2
- var n = 1;
while n < 13
div.key.flex
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
- n++
div.key.key--w2.flex
div.key__front.key__front--w2.face.face--key-b3
div.key__back.key__back--w2.face.face--key-b1
div.key__right.key__right--w2.face.face--key-b1
div.key__left.key__left--w2.face.face--key-b2
div.key__top.key__top--w2.face.face--key-b1
div.key__bottom.key__bottom--w2.face.face--key-b2
//----------------------
div.keys
div.key.key--w2.flex
div.key__front.key__front--w2.face.face--key-b3
div.key__back.key__back--w2.face.face--key-b1
div.key__right.key__right--w2.face.face--key-b1
div.key__left.key__left--w2.face.face--key-b2
div.key__top.key__top--w2.face.face--key-b1
div.key__bottom.key__bottom--w2.face.face--key-b2
- var n = 1;
while n < 13
div.key.flex
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
- n++
div.key.flex
div.key__front.face.face--key-b3
div.key__back.face.face--key-b1
div.key__right.face.face--key-b1
div.key__left.face.face--key-b2
div.key__top.face.face--key-b1
div.key__bottom.face.face--key-b2
//----------------------
div.keys
div.key.key--w3.flex
div.key__front.key__front--w3.face.face--key-b3
div.key__back.key__back--w3.face.face--key-b1
div.key__right.key__right--w3.face.face--key-b1
div.key__left.key__left--w3.face.face--key-b2
div.key__top.key__top--w3.face.face--key-b1
div.key__bottom.key__bottom--w3.face.face--key-b2
- var n = 1;
while n < 11
div.key.flex
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
- n++
div.key.key--w2.flex
div.key__front.key__front--w2.face.face--key-o3
div.key__back.key__back--w2.face.face--key-o1
div.key__right.key__right--w2.face.face--key-o1
div.key__left.key__left--w2.face.face--key-o2
div.key__top.key__top--w2.face.face--key-o1
div.key__bottom.key__bottom--w2.face.face--key-o2
//----------------------
div.keys
div.key.key--w2.flex
div.key__front.key__front--w2.face.face--key-b3
div.key__back.key__back--w2.face.face--key-b1
div.key__right.key__right--w2.face.face--key-b1
div.key__left.key__left--w2.face.face--key-b2
div.key__top.key__top--w2.face.face--key-b1
div.key__bottom.key__bottom--w2.face.face--key-b2
- var n = 1;
while n < 11
div.key.flex
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
- n++
div.key.key--w3.flex
div.key__front.key__front--w3.face.face--key-b3
div.key__back.key__back--w3.face.face--key-b1
div.key__right.key__right--w3.face.face--key-b1
div.key__left.key__left--w3.face.face--key-b2
div.key__top.key__top--w3.face.face--key-b1
div.key__bottom.key__bottom--w3.face.face--key-b2
//----------------------
div.keys
div.key.flex
div.key__front.face.face--key-b3
div.key__back.face.face--key-b1
div.key__right.face.face--key-b1
div.key__left.face.face--key-b2
div.key__top.face.face--key-b1
div.key__bottom.face.face--key-b2
div.key.flex
div.key__front.face.face--key-o3
div.key__back.face.face--key-o1
div.key__right.face.face--key-o1
div.key__left.face.face--key-o2
div.key__top.face.face--key-o1
div.key__bottom.face.face--key-o2
- var n = 1;
while n < 3
div.key.flex
div.key__front.face.face--key-b3
div.key__back.face.face--key-b1
div.key__right.face.face--key-b1
div.key__left.face.face--key-b2
div.key__top.face.face--key-b1
div.key__bottom.face.face--key-b2
- n++
div.key.key--w6.flex
div.key__front.key__front--w6.face
div.key__back.key__back--w6.face
div.key__right.key__right--w6.face
div.key__left.key__left--w6.face
div.key__top.key__top--w6.face
div.key__bottom.key__bottom--w6.face
- var n = 1;
while n < 6
div.key.flex
div.key__front.face.face--key-b3
div.key__back.face.face--key-b1
div.key__right.face.face--key-b1
div.key__left.face.face--key-b2
div.key__top.face.face--key-b1
div.key__bottom.face.face--key-b2
- n++
div.keyboard__bottom.face
Raw
script.js
/*
Designed by: Miguel E.
Original image: https://dribbble.com/shots/6276517-Hello
*/
const m = document.querySelector("#m");
const k = document.querySelector("#k");
const s = document.querySelector("#s");
const kd = document.querySelectorAll(".key")
let con = 0;
let base = (e) => {
let x = e.pageX / window.innerWidth - 0.5;
let y = e.pageY / window.innerHeight - 0.5;
k.style.transform = `
perspective(10000px)
rotateX(${ y * 10 + 60}deg)
rotateZ(-${ x * 40 + 35}deg)
`;
}
let addKey = (e) => {
let kc = event.keyCode;
if ( (kc >= 65 && kc <= 90) || kc == 32) {
if (kc == 81) { kd[15].classList.add("key--down"); }
else if (kc == 87) { kd[16].classList.add("key--down"); }
else if (kc == 69) { kd[17].classList.add("key--down"); }
else if (kc == 82) { kd[18].classList.add("key--down"); }
else if (kc == 84) { kd[19].classList.add("key--down"); }
else if (kc == 89) { kd[20].classList.add("key--down"); }
else if (kc == 85) { kd[21].classList.add("key--down"); }
else if (kc == 73) { kd[22].classList.add("key--down"); }
else if (kc == 79) { kd[23].classList.add("key--down"); }
else if (kc == 80) { kd[24].classList.add("key--down"); }
else if (kc == 65) { kd[29].classList.add("key--down"); }
else if (kc == 83) { kd[30].classList.add("key--down"); }
else if (kc == 68) { kd[31].classList.add("key--down"); }
else if (kc == 70) { kd[32].classList.add("key--down"); }
else if (kc == 71) { kd[33].classList.add("key--down"); }
else if (kc == 72) { kd[34].classList.add("key--down"); }
else if (kc == 74) { kd[35].classList.add("key--down"); }
else if (kc == 75) { kd[36].classList.add("key--down"); }
else if (kc == 76) { kd[37].classList.add("key--down"); }
else if (kc == 192) { kd[38].classList.add("key--down"); }
else if (kc == 90) { kd[41].classList.add("key--down"); }
else if (kc == 88) { kd[42].classList.add("key--down"); }
else if (kc == 67) { kd[43].classList.add("key--down"); }
else if (kc == 86) { kd[44].classList.add("key--down"); }
else if (kc == 66) { kd[45].classList.add("key--down"); }
else if (kc == 78) { kd[46].classList.add("key--down"); }
else if (kc == 77) { kd[47].classList.add("key--down"); }
else if (kc == 13) { kd[39].classList.add("key--down"); }
else if (kc == 32) {
kd[56].classList.add("key--down");
s.innerHTML += "&nbsp;";
}
s.innerHTML += String.fromCharCode(kc);
con++;
if (con > 10) { s.innerHTML = ""; con = 0; }
}
if (kc == 8) {
s.innerHTML = "";
kd[27].classList.add("key--down");
con = 0;
}
}
let removeKey = (e) => {
let kc = event.keyCode;
if (kc == 81) { kd[15].classList.remove("key--down"); }
else if (kc == 87) { kd[16].classList.remove("key--down"); }
else if (kc == 69) { kd[17].classList.remove("key--down"); }
else if (kc == 82) { kd[18].classList.remove("key--down"); }
else if (kc == 84) { kd[19].classList.remove("key--down"); }
else if (kc == 89) { kd[20].classList.remove("key--down"); }
else if (kc == 85) { kd[21].classList.remove("key--down"); }
else if (kc == 73) { kd[22].classList.remove("key--down"); }
else if (kc == 79) { kd[23].classList.remove("key--down"); }
else if (kc == 80) { kd[24].classList.remove("key--down"); }
else if (kc == 65) { kd[29].classList.remove("key--down"); }
else if (kc == 83) { kd[30].classList.remove("key--down"); }
else if (kc == 68) { kd[31].classList.remove("key--down"); }
else if (kc == 70) { kd[32].classList.remove("key--down"); }
else if (kc == 71) { kd[33].classList.remove("key--down"); }
else if (kc == 72) { kd[34].classList.remove("key--down"); }
else if (kc == 74) { kd[35].classList.remove("key--down"); }
else if (kc == 75) { kd[36].classList.remove("key--down"); }
else if (kc == 76) { kd[37].classList.remove("key--down"); }
else if (kc == 192) { kd[38].classList.remove("key--down"); }
else if (kc == 90) { kd[41].classList.remove("key--down"); }
else if (kc == 88) { kd[42].classList.remove("key--down"); }
else if (kc == 67) { kd[43].classList.remove("key--down"); }
else if (kc == 86) { kd[44].classList.remove("key--down"); }
else if (kc == 66) { kd[45].classList.remove("key--down"); }
else if (kc == 78) { kd[46].classList.remove("key--down"); }
else if (kc == 77) { kd[47].classList.remove("key--down"); }
else if (kc == 32) { kd[56].classList.remove("key--down"); }
else if (kc == 13) { kd[39].classList.remove("key--down"); }
else if (kc == 8) { kd[27].classList.remove("key--down"); }
}
m.addEventListener("mousemove", base);
window.addEventListener("keydown", addKey);
window.addEventListener("keyup", removeKey);
Raw
style.scss
/* Variables */
$bg-1: #E5E9F0;
$bg-2: #D8DEE9;
$keyboard-1: #E5E9F0;
$keyboard-2: #EAE7E5;
$keyboard-3: #9C9C9C;
$key-1: #D8DEE9;
$key-2: #ECEFF4;
$key-3: #D8DEE9;
$blue-1: #A9DFFD;
$blue-2: #8FD2F8;
$blue-3: #426585;
$orange-1: #FFA28E;
$orange-2: #B46266;
$orange-3: #8E3E43;
$screen-1: #5E81AC;
/* Reset */
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
}
/* Generic */
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: $bg-1;
overflow: hidden;
font-family: sans-serif;
font-weight: bolder;
color: #2E3440;
text-transform: uppercase;
letter-spacing: 2px;
}
.main{
width: 800px;
height: 600px;
position: relative;
// background: url("bg.jpg");
cursor: pointer;
margin-top: 200px;
@media(max-width: 1000px){ transform: scale(.75); }
@media(max-width: 800px){ transform: scale(.5); }
@media(max-width: 700px){ transform: scale(.4); }
@media(max-width: 500px){ transform: scale(.3); }
}
.flex{
display: flex;
justify-content: center;
align-items: center;
}
.face{ position: absolute; }
/*Base*/
/*=================================*/
/*=================================*/
$width-kb: 500px;
$height-kb: 160px;
$depth-kb: 25px;
.screen{
width: $width-kb / 1.65;
height: $height-kb * 1.5;
transform:
translateZ(100px)
translateY(-200px)
translateZ(50px)
rotateX(270deg)
;
background-color: $blue-1;
border-radius: 10px;
box-shadow:
0 0 5px rgba($blue-1, .8),
0 0 10px rgba($blue-1, .7),
0 0 15px rgba($blue-1, .6),
0 0 20px rgba($blue-1, .5),
0 0 40px rgba($blue-1, .4),
0 0 60px rgba($blue-1, .3)
;
animation: screen 1s ease-in alternate infinite ;
}
.keyboard{
width: $width-kb;
height: $height-kb;
transform:
perspective(10000px)
rotateX(50deg)
rotateZ(-25deg)
;
&__front{
width: $width-kb;
height: $depth-kb;
transform: rotateX(-90deg) translateZ($height-kb / 2);
background-color: $keyboard-3;
}
&__back{
width: $width-kb;
height: $depth-kb;
transform: rotateX( 90deg) translateZ($height-kb / 2);
background-color: $keyboard-1;
}
&__top{
display: flex;
flex-direction: column;
justify-content: space-around;
width: $width-kb;
height: $height-kb;
transform: rotateY(0deg) translateZ($depth-kb / 2);
background-image: linear-gradient(to bottom, lighten($blue-1, 10), lighten($bg-1, 10));
}
&__bottom{
width: $width-kb;
height: $height-kb;
transform: rotateY(180deg) translateZ($depth-kb / 2);
background-color: $keyboard-2;
box-shadow:
-20px 40px 0 $bg-2,
0px 40px 0 $bg-2,
5px -0px 0 $bg-2,
5px 40px 0 $bg-2
;
}
&__right{
width: $depth-kb;
height: $height-kb;
transform: rotateY(90deg) translateZ($width-kb / 2);
background-color: $keyboard-1;
}
&__left{
width: $depth-kb;
height: $height-kb;
transform: rotateY(90deg) translateZ(-$width-kb / 2);
background-color: $keyboard-2;
}
}
/*=================================*/
/*=================================*/
$width-ky: 30px;
$height-ky: 27px;
$depth-ky: 15px;
.keys{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
transform: translateZ($depth-ky / 2);
padding: 0 2px;
}
.key{
width: $width-ky;
height: $height-ky;
&--w2{ width: $width-ky * 2; }
&--w3{ width: $width-ky * 3; }
&--w6{ width: $width-ky * 6.5; }
transition: .05s ease;
&__front{
width: $width-ky;
height: $depth-ky;
transform: rotateX(-90deg) translateZ($height-ky / 2);
background-color: $key-3;
&--w2{ width: $width-ky * 2; }
&--w3{ width: $width-ky * 3; }
&--w6{ width: $width-ky * 6.5; }
}
&__back{
width: $width-ky;
height: $depth-ky;
transform: rotateX( 90deg) translateZ($height-ky / 2);
background-color: $key-1;
&--w2{ width: $width-ky * 2; }
&--w3{ width: $width-ky * 3; }
&--w6{ width: $width-ky * 6.5; }
}
&__top{
width: $width-ky;
height: $height-ky;
transform: rotateY(0deg) translateZ($depth-ky / 2);
background-color: $key-1;
background-image: linear-gradient(to bottom, lighten($blue-1, 15) , $key-1);
&--w2{ width: $width-ky * 2; }
&--w3{ width: $width-ky * 3; }
&--w6{ width: $width-ky * 6.5; }
}
&__bottom{
width: $width-ky;
height: $height-ky;
transform: rotateY(180deg) translateZ($depth-ky / 2);
background-color: $key-3;
&--w2{ width: $width-ky * 2; }
&--w3{ width: $width-ky * 3; }
&--w6{ width: $width-ky * 6.5; }
}
&__right{
width: $depth-ky;
height: $height-ky;
transform: rotateY(90deg) translateZ($width-ky / 2);
background-color: $key-3;
&--w2{ transform: rotateY(90deg) translateZ($width-ky);}
&--w3{ transform: rotateY(90deg) translateZ($width-ky * 1.5);}
&--w6{ transform: rotateY(90deg) translateZ($width-ky * 3.25);}
}
&__left{
width: $depth-ky;
height: $height-ky;
transform: rotateY(90deg) translateZ(-$width-ky / 2);
background-image: linear-gradient(to bottom, lighten($key-2 , 5) , $key-2);
&--w2{ transform: rotateY(90deg) translateZ(-$width-ky);}
&--w3{ transform: rotateY(90deg) translateZ(-$width-ky * 1.5);}
&--w6{ transform: rotateY(90deg) translateZ(-$width-ky * 3.25);}
}
}
/*=================================*/
/*=================================*/
.face--key-b1{ background: $blue-1; }
.face--key-b2{ background-image: linear-gradient(to bottom, lighten($blue-2 , 5) , $blue-2); }
.face--key-b3{ background-color: $blue-3; }
.face--key-o1{ background: $orange-1; }
.face--key-o2{ background-image: linear-gradient(to bottom, lighten($orange-2 , 5) , $orange-2); }
.face--key-o3{ background-color: $orange-3; }
.key--down{
display: flex;
justify-content: center;
align-items: center;
transform: translateZ(-5px);
transition: .05s ease;
> .key__top{
background: lighten($orange-1, 10);
}
}
/*=================================*/
/*=================================*/
@keyframes screen {
0%, 90%, 96%{ background-color: $blue-1 }
93%, 100%{ background-color: rgba($blue-2, .8); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment