3D Mekanik Düymələr
Mənbə Kodu

import { Pane } from 'https://cdn.skypack.dev/tweakpane@4.0.4'

const config = {
  theme: 'dark',
  muted: false,
  exploded: false,
  platform: 'macos',
  one: {
    travel: 26,
    text: 'ok',
    key: 'Meta',
    hue: 114,
    saturation: 1.4,
    brightness: 1.2,
    buttonElement: document.querySelector('#one'),
    textElement: document.querySelector('#one .key__text'),
  },
  two: {
    travel: 26,
    text: 'Tab',
    key: 'Tab',
    hue: 0,
    saturation: 0,
    brightness: 1.4,
    buttonElement: document.querySelector('#two'),
    textElement: document.querySelector('#two .key__text'),
  },
  three: {
    travel: 18,
    text: 'create.',
    key: 'c',
    hue: 0,
    saturation: 0,
    brightness: 0.4,
    buttonElement: document.querySelector('#three'),
    textElement: document.querySelector('#three .key__text'),
  },
  four: {
    travel: 18,
    text: 'create.',
    key: 'v',
    hue: 0,
    saturation: 0,
    brightness: 0.4,
    buttonElement: document.querySelector('#four'),
    textElement: document.querySelector('#four .key__text'),
  },
  five: {
    travel: 18,
    text: 'create.',
    key: 'Escape',
    hue: 0,
    saturation: 0,
    brightness: 0.4,
    buttonElement: document.querySelector('#five'),
    textElement: document.querySelector('#five .key__text'),
  },
}

const clickAudio = new Audio(
  'https://cdn.freesound.org/previews/378/378085_6260145-lq.mp3'
)
clickAudio.muted = config.muted

const ctrl = new Pane({
  title: 'config',
  expanded: true,
})

const update = () => {
  document.documentElement.dataset.theme = config.theme
  document.documentElement.dataset.platform = config.platform
}

const sync = (event) => {
  if (
    !document.startViewTransition ||
    event.target.controller.view.labelElement.innerText !== 'theme'
  )
    return update()
  document.startViewTransition(() => update())
}

ctrl.addBinding(config, 'platform', {
  options: {
    macos: 'macos',
    gemini: 'gemini',
    claude: 'claude',
    // openai: 'openai',
    perplexity: 'perplexity',
  },
})

ctrl
  .addBinding(config, 'muted')
  .on('change', () => (clickAudio.muted = config.muted))

ctrl.addBinding(config, 'theme', {
  label: 'theme',
  options: {
    system: 'system',
    light: 'light',
    dark: 'dark',
  },
})

const ids = ['one', 'two', 'three', 'four', 'five']
for (const id of ids) {
  config[id].buttonElement.style.setProperty('--travel', config[id].travel)
  config[id].buttonElement.style.setProperty(
    '--saturate',
    config[id].saturation
  )
  config[id].buttonElement.style.setProperty('--hue', config[id].hue)
  config[id].buttonElement.style.setProperty(
    '--brightness',
    config[id].brightness
  )
  config[id].buttonElement.addEventListener('pointerdown', () => {
    if (!config.muted) {
      clickAudio.currentTime = 0
      clickAudio.play()
    }
  })
}

// handle the key bindings
window.addEventListener('keydown', (event) => {
  for (const id of ids) {
    if (event.key === config[id].key) {
      config[id].buttonElement.dataset.pressed = true
      if (!config.muted) {
        clickAudio.currentTime = 0
        clickAudio.play()
      }
    }
  }
})
window.addEventListener('keyup', (event) => {
  for (const id of ids) {
    if (event.key === config[id].key || event.key === 'Meta')
      config[id].buttonElement.dataset.pressed = false
  }
})

ctrl.on('change', sync)
update()

@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, keys;

@layer keys {
  [data-key] {
    display: none;
    position: absolute;
    inset: 0;
    place-items: center;

    svg {
      width: 50%;
    }
  }
  
  img {
    pointer-events: none;
  }

  [data-platform='gemini'] #one {
    img {
      --brightness: 1.4;
      --saturate: 0.4;
      --hue: 330;
    }
    .key__text {
      color: hsl(214, 81%, 100%);
    }
  }
  [data-platform='claude'] #one {
    img {
      --brightness: 0.6;
      --saturate: 0;
    }
    .key__text {
      color: #d97757;
    }
  }
  [data-platform='perplexity'] #one {
    img {
      --hue: 280;
      --brightness: 0.8;
      --saturate: 1.2;
    }
    .key__text {
      color: #fff;
    }
  }
/*   [data-platform='openai'] #one {
    img {
      --hue: 220;
      --brightness: 1.2;
      --saturate: 0.4;
    }
    .key__text {
      color: #fff;

      svg {
        width: 50%;
      }
    }
  } */
  [data-platform='macos'] #one {
    .key__text {
      color: #fff;
      font-size: 22cqi;
    }
    img {
      --saturate: 0;
      --brightness: 0.6;
    }
  }

/*   [data-platform='openai'] [data-key='openai'], */

  [data-platform='macos'] [data-key='macos'],
  [data-platform='perplexity'] [data-key='perplexity'],
  [data-platform='claude'] [data-key='claude'],
  [data-platform='gemini'] [data-key='gemini'] {
    display: grid;
  }
}

@layer demo {
  :root {
    --travel: 20;
  }
  .keypad {
    position: relative;
    /* outline: 4px dashed red;
    outline-offset: 2px; */
    aspect-ratio: 400 / 310;
    display: flex;
    place-items: center;
    width: clamp(280px, 45vw, 500px);
    -webkit-tap-highlight-color: #0000;
    transition-property: translate, transform;
    transition-duration: 0.26s;
    transition-timing-function: ease-out;
    transform-style: preserve-3d;
    scale: 1;

    .key {
      transform-style: preserve-3d;
      border: 0;
      background: #0000;
      padding: 0;
      cursor: pointer;
      outline: none;

      &[data-pressed='true'],
      &:active {
        .key__content {
          translate: 0 calc(var(--travel) * 1%);
        }
      }
    }

    #one {
      left: 13.5%;
      bottom: 57.2%;
    }

    #two {
      left: 25.8%;
      bottom: 48.5%;
    }

    #three {
      left: 38%;
      bottom: 39.2%;
    }

    #four {
      left: 50.4%;
      bottom: 30.2%;
    }

    #five {
      left: 62.7%;
      bottom: 21%;
      .key__text {
        font-size: 34cqi;
        filter: grayscale(1);
      }
    }

    .key__content {
      width: 100%;
      display: inline-block;
      height: 100%;
      transition: translate 0.12s ease-out;
      container-type: inline-size;
    }

    .key__text {
      width: 52%;
      height: 62%;
      position: absolute;
      font-size: 18cqi;
      z-index: 21;
      top: 5%;
      left: 0;
      mix-blend-mode: normal;
      /* mix-blend-mode: overlay soft-light; */
      color: hsl(0 0% 4%);
      translate: 45% -16%;
      transform: rotateX(36deg) rotateY(45deg) rotateX(-90deg) rotate(0deg);
      display: grid;
      place-items: center;
    }

    .keypad__single {
      position: absolute;
      width: 21%;
      left: 54%;
      bottom: 36%;
      height: 24%;
      clip-path: polygon(
        0 0,
        54% 0,
        89% 24%,
        100% 70%,
        54% 100%,
        46% 100%,
        0 69%,
        12% 23%,
        47% 0%
      );
      mask: url(https://assets.codepen.io/605876/keypad-single.png?format=auto&quality=86)
        50% 50% / 100% 100%;

      img {
        --brightness: 2;
        --saturate: 0;
        top: 0;
        opacity: 1;
        width: 96%;
        position: absolute;
        left: 50%;
        translate: -50% 1%;
      }
    }

    .key__mask {
      width: 100%;
      height: 100%;
      display: inline-block;
    }

    .key img {
      filter: hue-rotate(calc(var(--hue, 0) * 1deg))
        saturate(var(--saturate, 1)) brightness(var(--brightness, 1));
    }

    .keypad__base {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
    img {
      width: 100%;
    }
  }
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  html {
    color-scheme: light dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
  }

  [data-theme='dark'] {
    color-scheme: dark only;
  }

  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  body {
    background: light-dark(#fff, #000);
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow: hidden;
    font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
      Helvetica, Arial, sans-serif, system-ui;
  }

  body::before {
    --size: 45px;
    --line: color-mix(in hsl, canvasText, transparent 80%);
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        calc(var(--size) * 0.36) 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
        calc(var(--size) * 0.32) / var(--size) var(--size);
    mask: linear-gradient(-20deg, transparent 50%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
  }

  .bear-link {
    color: canvasText;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0.8;
  }

  :where(.x-link, .bear-link):is(:hover, :focus-visible) {
    opacity: 1;
  }

  .bear-link svg {
    width: 75%;
  }

  /* Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

div.tp-dfwv {
  width: 280px;
}