diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6acc570
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store
\ No newline at end of file
diff --git a/README.md b/README.md
deleted file mode 100644
index a5a5ca6..0000000
--- a/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# virtual-keyboard
\ No newline at end of file
diff --git a/css/p1.96acd673a1e4fb58f6a1.css b/css/p1.96acd673a1e4fb58f6a1.css
new file mode 100644
index 0000000..7c282fe
--- /dev/null
+++ b/css/p1.96acd673a1e4fb58f6a1.css
@@ -0,0 +1,2 @@
+@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap);
+:root{--color: #FF6AB2;--black: #121212;--white: #ffffff;--keyboard: #FFC6ED;--back: #1e1e1e;--small-font-size: 12px;--radius: 8px}*{padding:0;margin:0;box-sizing:border-box;font-family:"Inter",sans-serif}.page{width:100vw;height:100vh;display:flex;justify-content:center;background-color:#fafafa;background-color:var(--back)}.main{max-width:844px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.intro__container{width:100%;display:flex;justify-content:center;margin-bottom:40px}.intro__container .description{font-size:20px;font-weight:300;text-align:center;color:var(--white)}.description span{border-radius:5px;border:1.5px solid var(--color);color:var(--color);font-size:15px;font-weight:400;letter-spacing:.02ch;padding:0px 5px}.note{font-size:20px;font-weight:300;text-align:center;color:var(--white)}.note a{display:inline-block;position:relative;color:var(--color);text-decoration:none;transition:all .3s ease-in}.note a::after{content:"";position:absolute;width:100%;height:1px;left:0;bottom:0;background-color:var(--color);transition:width .2s ease-in}.note a:hover::after{width:0}.textarea__container{width:100%;height:160px;margin-bottom:20px}.textarea{width:100%;height:100%;border:1px solid var(--black);border-radius:20px;background-color:var(--white);padding:15px 20px;margin-bottom:20px;outline:none;resize:none;font-family:"Inter",sans-serif;font-size:20px;color:var(--black)}.keyboard{width:100%}.keyboard__container{width:100%;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:5px;border:1px solid var(--black);border-radius:20px;padding:20px;margin-bottom:40px;background-color:var(--keyboard)}.key{width:50px;height:50px;display:flex;justify-content:center;align-items:center;outline:none;border:1px solid var(--black);border-radius:8px;background-color:var(--keyboard);padding:6px;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:var(--black);transition:all .2s ease-in;cursor:pointer;user-select:none}.key:hover{border:1px solid var(--color);box-shadow:0px 0px 6px var(--color)}.key:active{background-color:var(--color);box-shadow:none;transform:scale(0.98)}.key--active{background-color:var(--color);border:1px solid var(--color);box-shadow:none;transform:scale(0.98)}.key__delete{width:85px;font-size:var(--small-font-size);justify-content:flex-end;align-items:flex-end}.key__tab{width:85px;font-size:var(--small-font-size);justify-content:flex-start;align-items:flex-end}.key__caps{width:95px;font-size:var(--small-font-size);justify-content:flex-start;align-items:flex-end;position:relative}.key__caps::after{content:"";position:absolute;top:6px;left:6px;width:5px;height:5px;border-radius:50%;background-color:var(--black)}.label--small{font-size:var(--small-font-size);font-weight:500;align-items:flex-end}.key__return{width:95px;justify-content:flex-end}.key__shift--left{width:123px;justify-content:flex-start}.key__shift--right{width:123px;justify-content:flex-end}.key__fn{justify-content:flex-start}.key__cmd,.key__ctrl,.key__opt{justify-content:flex-start}.key__space{flex-grow:5}.arrows{width:160px;display:flex;gap:5px}.arrows--middle{width:50px;height:50px;display:flex;flex-direction:column;gap:4px}.arrows--middle .key__arrow{flex-grow:1}.arrows--middle .key__arrow{border-radius:7px}.key__arrow{display:flex;align-items:center;justify-content:center}.key__arrow .label{width:8px;height:8px;background-image:url(../images/arrow.svg);background-position:center;background-size:contain;background-repeat:no-repeat}.key__arrow:last-child .label{transform:rotate(180deg)}.arrows--middle .key__arrow:first-child .label{transform:rotate(90deg)}.arrows--middle .key__arrow:last-child .label{transform:rotate(-90deg)}
diff --git a/images/arrow.svg b/images/arrow.svg
new file mode 100644
index 0000000..9286e1a
--- /dev/null
+++ b/images/arrow.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/favicon.png b/images/favicon.png
new file mode 100644
index 0000000..9e24841
Binary files /dev/null and b/images/favicon.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2b44497
--- /dev/null
+++ b/index.html
@@ -0,0 +1 @@
+Virtual Keyboard
\ No newline at end of file
diff --git a/js/p1.a1c6be94f96c60e7dca8.js b/js/p1.a1c6be94f96c60e7dca8.js
new file mode 100644
index 0000000..d7783af
--- /dev/null
+++ b/js/p1.a1c6be94f96c60e7dca8.js
@@ -0,0 +1 @@
+(()=>{"use strict";const e=[{code:"Backquote",key:{en:"`",ru:"]"},shift:{en:"~",ru:"["},alt:{en:"`",ru:"]"}},{code:"Digit1",key:{en:"1",ru:"1"},shift:{en:"!",ru:"!"},alt:{en:"¡",ru:"!"}},{code:"Digit2",key:{en:"2",ru:"2"},shift:{en:"@",ru:'"'},alt:{en:"™",ru:"@"}},{code:"Digit3",key:{en:"3",ru:"3"},shift:{en:"#",ru:"№"},alt:{en:"£",ru:"#"}},{code:"Digit4",key:{en:"4",ru:"4"},shift:{en:"$",ru:"%"},alt:{en:"¢",ru:"$"}},{code:"Digit5",key:{en:"5",ru:"5"},shift:{en:"%",ru:":"},alt:{en:"∞",ru:"%"}},{code:"Digit6",key:{en:"6",ru:"6"},shift:{en:"^",ru:","},alt:{en:"§",ru:"^"}},{code:"Digit7",key:{en:"7",ru:"7"},shift:{en:"&",ru:"."},alt:{en:"¶",ru:"&"}},{code:"Digit8",key:{en:"8",ru:"8"},shift:{en:"*",ru:";"},alt:{en:"•",ru:"*"}},{code:"Digit9",key:{en:"9",ru:"9"},shift:{en:"(",ru:"("},alt:{en:"ª",ru:"{"}},{code:"Digit0",key:{en:"0",ru:"0"},shift:{en:")",ru:")"},alt:{en:"º",ru:"}"}},{code:"Minus",key:{en:"-",ru:"-"},shift:{en:"_",ru:"_"},alt:{en:"–",ru:"–"}},{code:"Equal",key:{en:"=",ru:"+"},shift:{en:"+",ru:"+"},alt:{en:"≠",ru:"»"}},{code:"Backspace",key:"Backspace"},{code:"Tab",key:"Tab"},{code:"KeyQ",key:{en:"q",ru:"й"},shift:{en:"Q",ru:"Й"},alt:{en:"œ",ru:"ј"}},{code:"KeyW",key:{en:"w",ru:"ц"},shift:{en:"W",ru:"Ц"},alt:{en:"∑",ru:"џ"}},{code:"KeyE",key:{en:"e",ru:"у"},shift:{en:"E",ru:"У"},alt:{en:"´",ru:"ќ"}},{code:"KeyR",key:{en:"r",ru:"к"},shift:{en:"R",ru:"К"},alt:{en:"®",ru:"®"}},{code:"KeyT",key:{en:"t",ru:"е"},shift:{en:"T",ru:"Е"},alt:{en:"†",ru:"†"}},{code:"KeyY",key:{en:"y",ru:"н"},shift:{en:"Y",ru:"Н"},alt:{en:"¥",ru:"њ"}},{code:"KeyU",key:{en:"u",ru:"г"},shift:{en:"U",ru:"Г"},alt:{en:"¨",ru:"ѓ"}},{code:"KeyI",key:{en:"i",ru:"ш"},shift:{en:"I",ru:"Ш"},alt:{en:"ˆ",ru:"ѕ"}},{code:"KeyO",key:{en:"o",ru:"щ"},shift:{en:"O",ru:"Щ"},alt:{en:"ø",ru:"ў"}},{code:"KeyP",key:{en:"p",ru:"з"},shift:{en:"P",ru:"З"},alt:{en:"π",ru:"‘"}},{code:"BracketLeft",key:{en:"[",ru:"х"},shift:{en:"{",ru:"Х"},alt:{en:"“",ru:"“"}},{code:"BracketRight",key:{en:"]",ru:"х"},shift:{en:"}",ru:"Х"},alt:{en:"‘",ru:"ъ"}},{code:"Backslash",key:{en:"\\",ru:"ё"},shift:{en:"|",ru:"Ё"},alt:{en:"«",ru:"ё"}},{code:"CapsLock",key:"CapsLock"},{code:"KeyA",key:{en:"a",ru:"ф"},shift:{en:"A",ru:"Ф"},alt:{en:"å",ru:"ƒ"}},{code:"KeyS",key:{en:"s",ru:"ы"},shift:{en:"S",ru:"Ы"},alt:{en:"ß",ru:"ы"}},{code:"KeyD",key:{en:"d",ru:"в"},shift:{en:"D",ru:"В"},alt:{en:"∂",ru:"ћ"}},{code:"KeyF",key:{en:"f",ru:"а"},shift:{en:"F",ru:"А"},alt:{en:"ƒ",ru:"÷"}},{code:"KeyG",key:{en:"g",ru:"п"},shift:{en:"G",ru:"П"},alt:{en:"©",ru:"©"}},{code:"KeyH",key:{en:"h",ru:"р"},shift:{en:"H",ru:"Р"},alt:{en:"˙",ru:"₽"}},{code:"KeyJ",key:{en:"j",ru:"о"},shift:{en:"J",ru:"О"},alt:{en:"∆",ru:"°"}},{code:"KeyK",key:{en:"k",ru:"л"},shift:{en:"K",ru:"Л"},alt:{en:"˚",ru:"љ"}},{code:"KeyL",key:{en:"l",ru:"д"},shift:{en:"L",ru:"Д"},alt:{en:"¬",ru:"∆"}},{code:"Semicolon",key:{en:";",ru:"ж"},shift:{en:":",ru:"Ж"},alt:{en:"…",ru:"…"}},{code:"Quote",key:{en:"'",ru:"э"},shift:{en:'"',ru:"Э"},alt:{en:"æ",ru:"э"}},{code:"Enter",key:"Enter"},{code:"ShiftLeft",key:"Shift"},{code:"KeyZ",key:{en:"z",ru:"я"},shift:{en:"Z",ru:"Я"},alt:{en:"",ru:""}},{code:"KeyX",key:{en:"x",ru:"ч"},shift:{en:"X",ru:"Ч"},alt:{en:"≈",ru:"≈"}},{code:"KeyC",key:{en:"c",ru:"с"},shift:{en:"C",ru:"С"},alt:{en:"ç",ru:"≠"}},{code:"KeyV",key:{en:"v",ru:"м"},shift:{en:"V",ru:"М"},alt:{en:"√",ru:"µ"}},{code:"KeyB",key:{en:"b",ru:"и"},shift:{en:"B",ru:"И"},alt:{en:"",ru:""}},{code:"KeyN",key:{en:"n",ru:"т"},shift:{en:"N",ru:"Т"},alt:{en:"˜",ru:"™"}},{code:"KeyM",key:{en:"m",ru:"ь"},shift:{en:"M",ru:"Ь"},alt:{en:"µ",ru:"~"}},{code:"Comma",key:{en:",",ru:"б"},shift:{en:"<",ru:"Б"},alt:{en:"≤",ru:"≤"}},{code:"Period",key:{en:".",ru:"ю"},shift:{en:">",ru:"Ю"},alt:{en:"≥",ru:"≥"}},{code:"Slash",key:{en:"/",ru:"/"},shift:{en:"?",ru:"?"},alt:{en:"÷",ru:"“"}},{code:"ShiftRight",key:"Shift"},{code:"Fn",key:"Fn"},{code:"ControlLeft",key:"Control"},{code:"AltLeft",key:"Alt"},{code:"MetaLeft",key:"Meta"},{code:"Space",key:" "},{code:"MetaRight",key:"Meta"},{code:"AltRight",key:"Alt"},{code:"ArrowLeft",key:"ArrowLeft"},{code:"ArrowUp",key:"ArrowUp"},{code:"ArrowDown",key:"ArrowDown"},{code:"ArrowRight",key:"ArrowRight"}],{body:t}=document;function n(e){return document.querySelector(`[data-code=${e}]`)}function r(e,t){const n=document.createElement(e);return n.classList.add(t),n}const o={Backspace:"key__delete",Tab:"key__tab",MetaLeft:"key__cmd--left",MetaRight:"key__cmd--right",CapsLock:"key__caps",Enter:["key__return","label--small"],ShiftLeft:["key__shift--left","key__shift"],ShiftRight:["key__shift--right","key__shift"],Space:"key__space",Fn:"key__fn",AltLeft:["key__opt","key__opt--left"],AltRight:["key__opt","key__opt--right"],ControlLeft:"key__ctrl",ArrowLeft:"key__arrow",ArrowUp:"key__arrow",ArrowDown:"key__arrow",ArrowRight:"key__arrow"};function a(e){const t=`[data-code=${e.code}]`,n=document.querySelector(t);"keydown"===e.type&&n.classList.add("key--active"),"keyup"===e.type&&n.classList.remove("key--active")}function c(e,t){let n=e.key[t]?e.key[t]:e.key;return"Enter"===n&&(n="Return"),"Backspace"===n&&(n="Delete"),"CapsLock"===n&&(n="Caps Lock"),"Alt"===n&&(n="Opt"),"Meta"===n&&(n="Cmd"),"Control"===n&&(n="Ctrl"),"ArrowLeft"===n&&(n=""),"ArrowUp"===n&&(n=""),"ArrowDown"===n&&(n=""),"ArrowRight"===n&&(n=""),n}class s{constructor(e){this.lang=e}create(){const t=document.querySelector(".keyboard__container");e.forEach((e=>{const n=c(e,this.lang),a=r("button","key");a.dataset.code=e.code,e.key.en&&(a.dataset.en=e.key.en,a.dataset.ru=e.key.ru),e.shift&&(a.dataset.shiftEn=e.shift.en,a.dataset.shiftRu=e.shift.ru),e.alt&&(a.dataset.altEn=e.alt.en,a.dataset.altRu=e.alt.ru),function(e){const t=e.dataset.code,n=o[t];n&&(Array.isArray(n)?e.classList.add(...n,"label--small"):e.classList.add(n,"label--small"))}(a);const s=r("span","label");s.textContent=n.toUpperCase(),a.append(s),t.append(a)}));const n=function(){const e=document.querySelectorAll(".key__arrow"),t=r("div","arrows"),n=r("div","arrows--middle");return e.forEach((e=>{const r=e.dataset.code;r.includes("Up")||r.includes("Down")?n.append(e):t.append(e)})),t.children[0].after(n),t}();t.append(n)}}let u=localStorage.getItem("currentLang")||"en";!function(){const e=r("div","page"),n=r("main","main"),o=r("div","intro__container"),a=r("div","textarea__container"),c=r("textarea","textarea"),s=r("div","keyboard"),u=r("div","keyboard__container"),i=r("p","description");i.innerHTML="🌸🌸🌸 This keyboard was created for Mac OS.
To delete prev character use DELETE, to delete next — CTRL + D
To switch languages use CTRL + CMD";const d=r("p","note");d.innerHTML="Here is a link to Pull Request. Sorry:)",o.append(i),a.append(c),s.append(u),n.append(o,a,s,d),e.append(n),t.prepend(e)}(),function(e){new s(e).create()}(u);const i=document.querySelector(".keyboard"),d=document.querySelector(".textarea");d.focus();const l=Array.from(document.querySelectorAll(".key__shift")),y=Array.from(document.querySelectorAll(".key__opt")),k=n("CapsLock"),f=n("ControlLeft"),h=" ".repeat(4);let p,_=d.value,L=0,w=!1,g=!1,v=!1,m=!1;function A(){const e=function(e){let t;if(e.dataset[u]||(t=""),e.dataset[u]&&(t=e.dataset[u]),g){const n=`shift${u[0].toUpperCase()}${u.slice(1)}`;e.dataset[u]&&(t=e.dataset[n])}if(m){const n=`alt${u[0].toUpperCase()}${u.slice(1)}`;e.dataset[u]&&(t=e.dataset[n])}return w&&(t=t.toUpperCase()),"Space"===e.dataset.code&&(t=" "),"Tab"===e.dataset.code&&(t=h),"Enter"===e.dataset.code&&(t="\n"),"ArrowLeft"===e.dataset.code&&(t="←"),"ArrowRight"===e.dataset.code&&(t="→"),"ArrowUp"===e.dataset.code&&(t="↑"),"ArrowDown"===e.dataset.code&&(t="↓"),t}(n(p)),t=_.slice(0,L),r=_.slice(L);d.value=t+e+r,_=d.value,R(e.length)}function S(e){e.preventDefault(),w&&k.classList.contains("key--active")?(k.classList.remove("key--active"),w=!1):w||k.classList.contains("key--active")||(k.classList.add("key--active"),w=!0)}function C(e){let t;t=e.target.closest(".key__shift")?e.target.closest(".key__shift"):n(e.code),"mousedown"!==e.type&&"keydown"!==e.type||(t.classList.add("key--active"),g=!0),"mouseup"!==e.type&&"keyup"!==e.type||(t.classList.remove("key--active"),g=!1)}function E(e){let t;t=e.target.closest(".key__opt")?e.target.closest(".key__opt"):n(e.code),"mousedown"!==e.type&&"keydown"!==e.type||(t.classList.add("key--active"),m=!0),"mouseup"!==e.type&&"keyup"!==e.type||(t.classList.remove("key--active"),m=!1)}function K(e){"mousedown"!==e.type&&"keydown"!==e.type||(f.classList.add("key--active"),v=!0),"mouseup"!==e.type&&"keyup"!==e.type||(f.classList.remove("key--active"),v=!1)}function D(){const e=L-1;if(e<0||e>_.length)return;const t=_.slice(0,e),n=_.slice(e+1);d.value=t+n,_=d.value,R(-1)}function b(){const e=L;if(e<0||e>_.length)return;const t=_.slice(0,e),n=_.slice(e+1);d.value=t+n,_=d.value,R(0)}function R(e){d.selectionStart=L+e,d.selectionEnd=d.selectionStart,L=d.selectionStart}window.addEventListener("keydown",(function(t){return t.preventDefault(),p=t.code,d.focus(),"Backspace"===t.code?(D(),void a(t)):("ControlLeft"===t.code&&K(t),v&&"KeyD"===p?(b(),void a(t)):("CapsLock"===t.code&&S(t),"ShiftLeft"!==t.code&&"ShiftRight"!==t.code||C(t),"AltLeft"!==t.code&&"AltRight"!==t.code||E(t),v&&"MetaLeft"===t.code&&function(){"en"===u?u="ru":"ru"===u&&(u="en"),localStorage.setItem("currentLang",u);const t=Array.from(document.querySelectorAll(".label"));e.forEach(((e,n)=>{const r=t[n],o=c(e,u);r.textContent=o.toUpperCase()}))}(),A(),void a(t)))})),window.addEventListener("keyup",(function(e){"ControlLeft"===e.code&&K(e),"CapsLock"===e.code&&S(e),"ShiftLeft"!==e.code&&"ShiftRight"!==e.code||C(e),"AltLeft"!==e.code&&"AltRight"!==e.code||E(e),a(e)})),i.addEventListener("click",(function(e){const t=e.target.closest("button");t&&(p=t.dataset.code,d.focus(),"Backspace"!==p?v&&"KeyD"===p?b():("CapsLock"===t.dataset.code&&S(e),A()):D())})),d.addEventListener("click",(function(){L=d.selectionStart,d.selectionStart=L})),l.forEach((e=>{e.addEventListener("mousedown",C),e.addEventListener("mouseup",C)})),y.forEach((e=>{e.addEventListener("mousedown",E),e.addEventListener("mouseup",E)})),f.addEventListener("mousedown",K),f.addEventListener("mouseup",K)})();
\ No newline at end of file