{"id":16,"date":"2026-04-06T06:51:08","date_gmt":"2026-04-06T06:51:08","guid":{"rendered":"https:\/\/keyboardflow.com\/?page_id=16"},"modified":"2026-04-06T06:51:08","modified_gmt":"2026-04-06T06:51:08","slug":"odia","status":"publish","type":"page","link":"https:\/\/keyboardflow.com\/index.php\/odia\/","title":{"rendered":"ODIA"},"content":{"rendered":"\n<style>\n:root {\n    --kb-bg: #1e293b;\n    --kb-gradient: linear-gradient(145deg, #1e293b, #0f172a);\n    --key-main: #ffffff;\n    --key-text: #334155;\n    --accent: #6366f1;\n    --accent-glow: rgba(99, 102, 241, 0.4);\n    --key-shadow: #cbd5e1;\n    --bg-light: #f8fafc;\n}\n\n.app-container {\n    width: 100%;\n    max-width: 1100px;\n    background: var(--bg-light);\n    border-radius: 20px;\n    padding: 25px;\n    margin: 20px auto;\n    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n}\n\n\/* Textarea Styling *\/\ntextarea#inputField {\n    width: 100%;\n    height: 220px;\n    margin-bottom: 25px;\n    padding: 20px;\n    font-size: 24px;\n    line-height: 1.6;\n    border: 2px solid #e2e8f0;\n    border-radius: 15px;\n    background: #ffffff;\n    color: #1e293b;\n    resize: none;\n    transition: border-color 0.3s ease, box-shadow 0.3s ease;\n    box-sizing: border-box;\n}\n\ntextarea#inputField:focus {\n    outline: none;\n    border-color: var(--accent);\n    box-shadow: 0 0 0 4px var(--accent-glow);\n}\n\n\/* Keyboard Container *\/\n.keyboard {\n    background: var(--kb-gradient);\n    padding: 20px;\n    border-radius: 18px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    box-shadow: inset 0 2px 4px rgba(255,255,255,0.1);\n}\n\n.row {\n    display: flex;\n    justify-content: center;\n    gap: 8px;\n}\n\n\/* Base Key Styling *\/\n.key {\n    flex: 1;\n    min-width: 45px;\n    height: 58px;\n    background: var(--key-main);\n    color: var(--key-text);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    cursor: pointer;\n    user-select: none;\n    transition: all 0.1s ease;\n    border-bottom: 4px solid var(--key-shadow);\n    font-weight: 600;\n}\n\n.key:hover {\n    background: #f1f5f9;\n    transform: translateY(-1px);\n}\n\n.key:active, .key.active-press {\n    transform: translateY(3px);\n    border-bottom-width: 0px;\n    background: #e2e8f0;\n    box-shadow: 0 0 15px var(--accent-glow);\n}\n\n\/* Modifier Keys (Shift, Backspace, etc) *\/\n.key.modifier {\n    background: #94a3b8;\n    color: white;\n    font-size: 12px;\n    text-transform: uppercase;\n    border-bottom-color: #64748b;\n    flex: 1.5;\n}\n\n.key.space {\n    flex: 5;\n    background: #f8fafc;\n}\n\n\/* Labels Inside Keys *\/\n.eng {\n    position: absolute;\n    top: 5px;\n    right: 8px;\n    font-size: 11px;\n    font-weight: 400;\n    color: #94a3b8;\n}\n\n.normal {\n    font-size: 20px;\n    color: #0f172a;\n}\n\n.shift-val {\n    position: absolute;\n    bottom: 5px;\n    left: 8px;\n    font-size: 11px;\n    color: var(--accent);\n}\n\n\/* Responsive adjustments *\/\n@media (max-width: 768px) {\n    .key { min-width: 30px; height: 50px; }\n    .normal { font-size: 16px; }\n    .eng, .shift-val { display: none; }\n}\n<\/style>\n\n<div class=\"app-container\">\n    <div id=\"kb\" class=\"keyboard\"><\/div>\n    <textarea id=\"inputField\" placeholder=\"\u0b0f\u0b20\u0b3e\u0b30\u0b47 \u0b1f\u0b3e\u0b07\u0b2a\u0b4d \u0b15\u0b30\u0b28\u0b4d\u0b24\u0b41...\"><\/textarea>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n\nconst imap = {\n    '`':['',''],\n    '1':['\u0b67','!'],'2':['\u0b68','@'],'3':['\u0b69','#'],'4':['\u0b6a','$'],\n    '5':['\u0b6b','%'],'6':['\u0b6c','^'],'7':['\u0b6d','&'],'8':['\u0b6e','*'],\n    '9':['\u0b6f','('],'0':['\u0b66',')'],'-':['-','_'],'=':['=','+'],\n\n    'q':['\u0b4c','\u0b14'],'w':['\u0b48','\u0b10'],'e':['\u0b3e','\u0b06'],'r':['\u0b40','\u0b08'],\n    't':['\u0b42','\u0b0a'],'y':['\u0b2c','\u0b2d'],'u':['\u0b39','\u0b19'],'i':['\u0b15','\u0b16'],\n    'o':['\u0b24','\u0b25'],'p':['\u0b1c','\u0b1d'],'[':['\u0b1f','\u0b20'],']':['\u0b1e','\u0b1e'],'\\\\':['',''],\n\n    'a':['\u0b4b','\u0b13'],'s':['\u0b47','\u0b0f'],'d':['\u0b4d','\u0b05'],'f':['\u0b3f','\u0b07'],\n    'g':['\u0b41','\u0b09'],'h':['\u0b2a','\u0b2b'],'j':['\u0b30','\u0b5c'],'k':['\u0b15','\u0b17'],\n    'l':['\u0b24','\u0b26'],';':['\u0b1a','\u0b1b'],\"'\":['\u0b1f','\u0b21'],\n\n    'z':['\u0b47','\u0b0f'],'x':['\u0b02','\u0b03'],'c':['\u0b2e','\u0b23'],'v':['\u0b28','\u0b28'],\n    'b':['\u0b71','\u0b71'],'n':['\u0b32','\u0b33'],'m':['\u0b38','\u0b36'],\n\n    ',':['\u0b2f','\u0b37'],'.':['\u0964','\u0964'],'\/':['\u0b2f','?']\n};\n\nconst rows = [\n    ['`','1','2','3','4','5','6','7','8','9','0','-','=','backspace'],\n    ['tab','q','w','e','r','t','y','u','i','o','p','[',']','\\\\'],\n    ['caps','a','s','d','f','g','h','j','k','l',';',\"'\",'enter'],\n    ['shift','z','x','c','v','b','n','m',',','.','\/','shift'],\n    ['space']\n];\n\nconst kb = document.getElementById('kb');\nconst input = document.getElementById('inputField');\n\nrows.forEach(row => {\n    const rowDiv = document.createElement('div');\n    rowDiv.className = 'row';\n\n    row.forEach(key => {\n        const keyDiv = document.createElement('div');\n        keyDiv.className = 'key';\n        keyDiv.dataset.key = key;\n\n        if (['backspace','tab','caps','enter','shift'].includes(key))\n            keyDiv.classList.add('modifier');\n        if (key === 'space') keyDiv.classList.add('space');\n\n        if (imap[key]) {\n            keyDiv.innerHTML = `\n                <span class=\"eng\">${key}<\/span>\n                <span class=\"normal\">${imap[key][0]}<\/span>\n                <span class=\"shift-val\">${imap[key][1]}<\/span>\n            `;\n        } else {\n            keyDiv.innerHTML = `<span>${key}<\/span>`;\n        }\n\n        keyDiv.addEventListener('mousedown', (e) => {\n            e.preventDefault();\n            handleKey(key, e.shiftKey);\n        });\n\n        rowDiv.appendChild(keyDiv);\n    });\n\n    kb.appendChild(rowDiv);\n});\n\nfunction handleKey(key, shift) {\n    const start = input.selectionStart;\n    const end = input.selectionEnd;\n    let char = '';\n\n    if (imap[key]) {\n        char = shift ? imap[key][1] : imap[key][0];\n    } else if (key === 'space') char = ' ';\n    else if (key === 'enter') char = '\\n';\n    else if (key === 'backspace') {\n        input.setRangeText('', start === end ? start - 1 : start, end, 'end');\n        input.focus();\n        input.scrollTop = input.scrollHeight;\n        return;\n    }\n\n    if (char) {\n        input.setRangeText(char, start, end, 'end');\n    }\n\n    input.focus();\n    input.scrollTop = input.scrollHeight;\n}\n\nwindow.addEventListener('keydown', (e) => {\n    const key = e.key.toLowerCase();\n\n    if (imap[key] || key === ' ' || key === 'enter' || key === 'backspace') {\n        if (document.activeElement === input) {\n            e.preventDefault();\n            handleKey(key === ' ' ? 'space' : key, e.shiftKey);\n        }\n    }\n\n    const el = document.querySelector(`.key[data-key=\"${key}\"]`);\n    if (el) el.classList.add('active-press');\n});\n\nwindow.addEventListener('keyup', (e) => {\n    const key = e.key.toLowerCase();\n    const el = document.querySelector(`.key[data-key=\"${key}\"]`);\n    if (el) el.classList.remove('active-press');\n});\n\n});\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":1,"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}